Spaces:
Running
Running
File size: 1,903 Bytes
de2d4cd df91643 de2d4cd df91643 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 |
<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 fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
delete body.model
return `const response = await fetch(
"${fullpath}",
{
method: "POST",
headers: ${JSON.stringify(headers)},
body: ${JSON.stringify(body)}
}
)`;
};
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-yellow-500">
<Icon icon="ri:javascript-fill" class="text-xl" />
<p class="text-xs font-semibold">Javascript</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> |