Hugging Face's logo

Spaces:
huggingfacejs
/
inference-widgets
Running on CPU Upgrade

App Files Community
1
inference-widgets
File size: 973 Bytes 
b2ecf7d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<script lang="ts">
	import { afterUpdate } from "svelte";

	import { isFullyScrolled, scrollToMax } from "../../../../utils/ViewUtils.js";
	import WidgetOutputConvoBubble from "../WidgetOuputConvoBubble/WidgetOutputConvoBubble.svelte";

	export let modelId: string;
	export let output: Array<{
		input: string;
		response: string;
	}>;

	let wrapperEl: HTMLElement;

	afterUpdate(() => {
		if (wrapperEl && !isFullyScrolled(wrapperEl)) {
			scrollToMax(wrapperEl);
		}
	});
</script>

<div bind:this={wrapperEl} class="h-64 overflow-y-auto rounded-t-lg border border-b-0 leading-tight">
	<div class="p-3 pt-6 text-center text-sm text-gray-400">
		Input a message to start chatting with
		<strong>{modelId}</strong>.
	</div>
	<div class="flex flex-col items-end space-y-4 p-3">
		{#each output as exchange}
			<WidgetOutputConvoBubble position="right" text={exchange.input} />
			<WidgetOutputConvoBubble position="left" text={exchange.response} />
		{/each}
	</div>
</div>