File size: 2,286 Bytes
8000347
5213b80
38434c2
8000347
 
 
 
38434c2
6bcbb4b
bdc9315
 
 
 
8000347
bdc9315
 
 
 
8000347
 
e1cf22b
 
 
8000347
e1cf22b
 
8000347
e1cf22b
 
 
8000347
 
e1cf22b
 
 
 
 
 
 
 
6fdab00
bdc9315
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e1cf22b
bdc9315
 
 
 
a95ab46
8000347
bdc9315
8000347
bdc9315
8000347
967ff1b
a95ab46
8000347
 
 
e1cf22b
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
72
73
74
75
76
77
78
79
<script lang="ts">
	import { type ChatCompletionInputMessage } from '@huggingface/tasks';

	export let model: string;
	export let streaming: Boolean;
	export let temperature: number;
	export let maxTokens: number;
	export let messages: ChatCompletionInputMessage[];

	const npmSnippet = `import { HfInference } from '@huggingface/inference'

const hf = new HfInference('your access token')`;

	$: nonStreamingSnippet = `await hf.chatCompletion({
  model: "${model}",
  messages: [
    { role: "user", content: "Complete the this sentence with words one plus one is equal " }
  ], 
  max_tokens: ${maxTokens},
  temperature: ${temperature},
  seed: 0,
});`;

	$: streamingSnippet = `let out = "";

for await (const chunk of hf.chatCompletionStream({
  model: "${model}",
  messages: [
    { role: "user", content: "Complete the equation 1+1= ,just the answer" }, 
  ],
  max_tokens: ${maxTokens}, 
  temperature: ${temperature},
  seed: 0,
})) {
  if (chunk.choices && chunk.choices.length > 0) {
    out += chunk.choices[0].delta.content;
  }  
}`;
</script>

<div class="px-2 pt-2">
	<div
		class="border-b border-gray-200 text-center text-sm font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400"
	>
		<ul class="-mb-px flex flex-wrap">
			<li>
				<a
					href="#"
					class="active inline-block rounded-t-lg border-b-2 border-black p-4 text-black dark:border-blue-500 dark:text-blue-500"
					aria-current="page">Huggingface.js</a
				>
			</li>
			<li>
				<a
					href="#"
					class="inline-block rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300"
					>Curl</a
				>
			</li>
		</ul>
	</div>

	<div class="px-4 pb-4 pt-6">
		<h2 class="font-semibold">Install and instantiate</h2>
	</div>
	<pre
		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{npmSnippet}</pre>

	<div class="px-4 pb-4 pt-6">
		<h2 class="font-semibold">{streaming ? 'Streaming API' : 'Non-Streaming API'}</h2>
	</div>

	<pre
		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{streaming
			? streamingSnippet
			: nonStreamingSnippet}
  </pre>
</div>