Spaces:
Running
Running
File size: 2,416 Bytes
de2d4cd df91643 de2d4cd 19e4f9a df91643 19e4f9a de2d4cd 19e4f9a de2d4cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<script lang="ts">
import Icon from '@iconify/svelte';
import Highlight from "svelte-highlight";
import javascript from "svelte-highlight/languages/javascript";
import { env } from '$env/dynamic/public'
export let body: Record<string, any>;
export let endpoint: string;
export let headers: Record<string, any>;
export let onCopyToClipboard: (e: string) => void;
let isCopied: boolean = false;
const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
const b = { ...body };
const fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
delete b.model
const removeEmptyValues = (data: Record<string, any>) => {
const formattedData = { ...data };
Object.entries(formattedData).forEach(([key, value]) => {
if (typeof value === "object") {
const new_value = removeEmptyValues(value);
formattedData[key] = new_value
} else {
if (typeof value === "boolean") {
formattedData[key] = value ? "True" : "False";
}
}
});
return formattedData;
};
const formattedBody = removeEmptyValues(b ?? {});
return `import requests
response = requests.post(
"${fullpath}",
json=${JSON.stringify(formattedBody)},
headers=${JSON.stringify(headers)}
)`;
};
const handleCopy = () => {
onCopyToClipboard(generateCurlRequestFromEndpoint(body));
isCopied = true
setTimeout(() => {
isCopied = false
}, 1000);
};
$: code = generateCurlRequestFromEndpoint(body)
</script>
<div class="bg-slate-900/50 rounded-xl overflow-hidden">
<header class="bg-slate-900 flex items-center justify-start px-5 py-4 uppercase gap-2 text-blue-500">
<Icon icon="logos:python" class="text-xl" />
<p class="text-xs font-semibold">Python</p>
</header>
<main class="px-6 py-6">
<Highlight language={javascript} {code} />
<button class="flex justify-end relative w-full" on:click={handleCopy}>
<Icon icon="solar:copy-bold-duotone" class="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75 w-5 h-5" />
<div
class="bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200"
class:opacity-0={!isCopied}
>
Copied!
</div>
</button>
</main>
</div> |