release: build 60371bd7e5a9f74f023fc8c57fca5cced4b0e47b

.gitattributes

@@ -1,3 +1,5 @@
+
+# Default
 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,70 @@
 ---
-title: Conversational Webgpu
-emoji: ⚡
-colorFrom: yellow
-colorTo: green
+emoji: "\U0001F4AC"
 sdk: static
 pinned: false
+license: mit
+title: Realtime Conversational WebGPU (Vue)
+colorFrom: purple
+colorTo: indigo
+models:
+  - HuggingFaceTB/SmolLM2-1.7B-Instruct
+  - onnx-community/whisper-base
+  - onnx-community/silero-vad
+short_description: Yet another Realtime Conversational WebGPU
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<h1 align="center">Realtime Conversational WebGPU (Vue)</h1>
+
+<p align="center">
+  [<a href="https://conversational-webgpu-vue.netlify.app/">Try it</a>]
+</p>
+
+> Heavily inspired by [WebGPU Video Object Detection - a Hugging Face Space by WebML Community](https://huggingface.co/spaces/webml-community/webgpu-video-object-detection)
+
+# Realtime Conversational WebGPU
+
+## Getting Started
+
+Follow the steps below to set up and run the application.
+
+### 1. Clone the Repository
+
+Clone the examples repository from GitHub:
+
+```sh
+git clone https://github.com/proj-airi/webai-examples.git
+```
+
+### 2. Navigate to the Project Directory
+
+Change your working directory to the `conversational-webgpu` folder:
+
+```sh
+cd apps/conversational-webgpu
+```
+
+### 3. Install Dependencies
+
+Install the necessary dependencies using npm:
+
+```sh
+npm i
+```
+
+### 4. Run the Development Server
+
+Start the development server:
+
+```sh
+npm run dev
+```
+
+The application should now be running locally. Open your browser and go to `http://localhost:5175` to see it in action.
+
+## Acknowledgements
+
+Great thanks to what WebML Community have done.
+
+> [Source code](https://huggingface.co/spaces/webml-community/conversational-webgpu)
+
+> [UI inspiration](https://app.sesame.com/)

assets/index-cAxkOY9l.css

@@ -0,0 +1 @@
+@keyframes ripple-314fbe9f{0%{transform:scale(1);opacity:.7}to{transform:scale(2);opacity:0}}.embla[data-v-314fbe9f]{position:relative;overflow:hidden}.embla[data-v-314fbe9f]:before,.embla[data-v-314fbe9f]:after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}.embla-edge-disabled.embla[data-v-314fbe9f]:before,.embla-edge-disabled.embla[data-v-314fbe9f]:after{display:none}.embla[data-v-314fbe9f]:before{left:-24px;background:linear-gradient(to right,#ffffff 32px,transparent)}.embla[data-v-314fbe9f]:after{right:-24px;background:linear-gradient(to left,#ffffff 32px,transparent)}.dark .embla[data-v-314fbe9f]:before{left:-24px;background:linear-gradient(to right,#121212 32px,transparent)}.dark .embla[data-v-314fbe9f]:after{right:-24px;background:linear-gradient(to left,#121212 32px,transparent)}.fade-enter-active[data-v-314fbe9f],.fade-leave-active[data-v-314fbe9f]{transition:opacity .5s ease}.fade-enter-from[data-v-314fbe9f],.fade-leave-to[data-v-314fbe9f]{opacity:0}.fade-enter-to[data-v-314fbe9f],.fade-leave-from[data-v-314fbe9f]{opacity:1}.fade-scale-enter-active[data-v-314fbe9f],.fade-scale-leave-active[data-v-314fbe9f]{transition:all .2s ease-in-out}.fade-scale-enter-from[data-v-314fbe9f],.fade-scale-leave-to[data-v-314fbe9f]{opacity:0;transform:scale(.8)}.fade-scale-enter-to[data-v-314fbe9f],.fade-scale-leave-from[data-v-314fbe9f]{opacity:1;transform:scale(1)}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--un-default-border-color, #e5e7eb)}:before,:after{--un-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--bg-color-light: rgb(255 255 255);--bg-color-dark: rgb(18 18 18);--bg-color: var(--bg-color-light)}html,body,#app{height:100%;margin:0;padding:0;overscroll-behavior:none}html{background:var(--bg-color);transition:all .3s ease-in-out}html.dark{--bg-color: var(--bg-color-dark);color-scheme:dark}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }@font-face{font-family:DM Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/dmmono/v15/aFTU7PB1QTsUX8KYthSQBK6PYK3EXw.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/dmmono/v15/aFTU7PB1QTsUX8KYthqQBK6PYK0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:DM Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/dmsans/v16/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRR232RmYJp8I5zzw.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/dmsans/v16/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRSW32RmYJp8I5.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/dmserifdisplay/v16/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0vrx52jJ3Q.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/dmserifdisplay/v16/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52g.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.i-solar\:end-call-rounded-bold,[i-solar\:end-call-rounded-bold=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m5.607 16.897l1.34-.38C8.156 16.174 9 14.983 9 13.618c0 0 0-1.654 3-1.654s3 1.654 3 1.654c0 1.365.844 2.556 2.053 2.9l1.34.38C20.218 17.414 22 15.91 22 13.85c0-1.237-.277-2.477-1.083-3.347C19.56 9.04 16.807 7 12 7s-7.56 2.039-8.917 3.503C2.277 11.373 2 12.613 2 13.85c0 2.06 1.782 3.565 3.607 3.047'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.2em;height:1.2em}.i-solar\:phone-bold,[i-solar\:phone-bold=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m16.556 12.906l-.455.453s-1.083 1.076-4.038-1.862s-1.872-4.014-1.872-4.014l.286-.286c.707-.702.774-1.83.157-2.654L9.374 2.86C8.61 1.84 7.135 1.705 6.26 2.575l-1.57 1.56c-.433.432-.723.99-.688 1.61c.09 1.587.808 5 4.812 8.982c4.247 4.222 8.232 4.39 9.861 4.238c.516-.048.964-.31 1.325-.67l1.42-1.412c.96-.953.69-2.588-.538-3.255l-1.91-1.039c-.806-.437-1.787-.309-2.417.317'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.2em;height:1.2em}.i-svg-spinners\:3-dots-bounce,[i-svg-spinners\:3-dots-bounce=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='4' cy='12' r='3' fill='currentColor'%3E%3Canimate id='svgSpinners3DotsBounce0' attributeName='cy' begin='0;svgSpinners3DotsBounce1.end+0.25s' calcMode='spline' dur='0.6s' keySplines='.33,.66,.66,1;.33,0,.66,.33' values='12;6;12'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='currentColor'%3E%3Canimate attributeName='cy' begin='svgSpinners3DotsBounce0.begin+0.1s' calcMode='spline' dur='0.6s' keySplines='.33,.66,.66,1;.33,0,.66,.33' values='12;6;12'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='currentColor'%3E%3Canimate id='svgSpinners3DotsBounce1' attributeName='cy' begin='svgSpinners3DotsBounce0.begin+0.2s' calcMode='spline' dur='0.6s' keySplines='.33,.66,.66,1;.33,0,.66,.33' values='12;6;12'/%3E%3C/circle%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.2em;height:1.2em}.prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);text-decoration:underline;font-weight:500}.prose :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links)}.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders)}.prose :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em}.prose :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em}.prose :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em}.prose :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em}.prose :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%}.prose :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:DM Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.prose :where(:not(pre)>code):not(:where(.not-prose,.not-prose *)):before,.prose :where(:not(pre)>code):not(:where(.not-prose,.not-prose *)):after{content:"`"}.prose :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem}.prose :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit}.prose :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em}.prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.prose :where(ol[type=A]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc}.prose :where(ol>li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(ul>li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists)}.prose :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em 0;border:1px solid var(--un-prose-hr)}.prose :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto}.prose :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft)}.prose :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em}.prose :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help}.prose :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem}.prose :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft)}.prose :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600}.prose{color:var(--un-prose-body);max-width:65ch}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.z-10{z-index:10}.m-auto{margin:auto}.-mt-4{margin-top:-1rem}.mb-4{margin-bottom:1rem}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-100dvh{height:100dvh}.h-32{height:8rem}.h-50{height:12.5rem}.h-80{height:20rem}.h-full,[h-full=""]{height:100%}.min-w-0{min-width:0}.w-100dvw{width:100dvw}.w-120{width:30rem}.w-140{width:35rem}.w-32{width:8rem}.w-fit,[w-fit=""]{width:fit-content}.w-full{width:100%}.flex,[flex=""]{display:flex}.flex-\[0_0_80\%\]{flex:0 0 80%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.flex-col,[flex-col=""]{flex-direction:column}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.cursor-pointer{cursor:pointer}.items-center,[items-center=""]{align-items:center}.justify-center,[justify-center=""]{justify-content:center}.justify-between,[justify-between=""]{justify-content:space-between}.gap-2,[gap-2=""]{gap:.5rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.border-2{border-width:2px}.border-cyan-200{--un-border-opacity:1;border-color:rgb(165 243 252 / var(--un-border-opacity))}.dark .dark\:border-cyan-500{--un-border-opacity:1;border-color:rgb(6 182 212 / var(--un-border-opacity))}.rounded-full{border-radius:9999px}.rounded-lg,[rounded-lg=""]{border-radius:.5rem}.rounded-xl,[rounded-xl=""]{border-radius:.75rem}.bg-cyan-200{--un-bg-opacity:1;background-color:rgb(165 243 252 / var(--un-bg-opacity))}.bg-cyan-300{--un-bg-opacity:1;background-color:rgb(103 232 249 / var(--un-bg-opacity))}.bg-red-200{--un-bg-opacity:1;background-color:rgb(254 202 202 / var(--un-bg-opacity))}.bg-red-300{--un-bg-opacity:1;background-color:rgb(252 165 165 / var(--un-bg-opacity))}.dark .dark\:bg-cyan-600{--un-bg-opacity:1;background-color:rgb(8 145 178 / var(--un-bg-opacity))}.dark .dark\:bg-cyan-800{--un-bg-opacity:1;background-color:rgb(21 94 117 / var(--un-bg-opacity))}.dark .dark\:bg-red-400{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity))}.dark [bg~="dark:cyan-950"]{--un-bg-opacity:1;background-color:rgb(8 51 68 / var(--un-bg-opacity))}[bg~=cyan-50]{--un-bg-opacity:1;background-color:rgb(236 254 255 / var(--un-bg-opacity))}.dark [bg~="dark:hover:cyan-900"]:hover{--un-bg-opacity:1;background-color:rgb(22 78 99 / var(--un-bg-opacity))}[bg~="hover:cyan-100"]:hover{--un-bg-opacity:1;background-color:rgb(207 250 254 / var(--un-bg-opacity))}.p-4,[p-4=""]{padding:1rem}.px-1,[px-1=""]{padding-left:.25rem;padding-right:.25rem}.px-16{padding-left:4rem;padding-right:4rem}.px-4,[px-4=""]{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1,[py-1=""]{padding-top:.25rem;padding-bottom:.25rem}.py-2,[py-2=""]{padding-top:.5rem;padding-bottom:.5rem}.pl-0{padding-left:0}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-left{text-align:left}.text-2xl,[text-2xl=""]{font-size:1.5rem;line-height:2rem}.text-lg,[text-lg=""]{font-size:1.125rem;line-height:1.75rem}.text-sm,[text-sm=""]{font-size:.875rem;line-height:1.25rem}.dark .dark\:text-white,.dark [text~="dark:white"]{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity))}.dark [text~="dark:cyan-500"]{--un-text-opacity:1;color:rgb(6 182 212 / var(--un-text-opacity))}.text-gray-700{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity))}.text-red-700{--un-text-opacity:1;color:rgb(185 28 28 / var(--un-text-opacity))}[text~=black]{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity))}[text~=cyan-400]{--un-text-opacity:1;color:rgb(34 211 238 / var(--un-text-opacity))}[text~=red-400]{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity))}[text~="hover:red-300"]:hover{--un-text-opacity:1;color:rgb(252 165 165 / var(--un-text-opacity))}[text~="active:red-400"]:active{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity))}.font-sans{font-family:DM Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.opacity-0{opacity:0}.opacity-75{opacity:.75}.shadow-inner{--un-shadow:inset 0 2px 4px 0 var(--un-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.outline-none,[outline-none=""]{outline:2px solid transparent;outline-offset:2px}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}[transition~=all]{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300,[transition~=duration-300]{transition-duration:.3s}.duration-500,[transition~=duration-500]{transition-duration:.5s}.ease,.ease-in-out,[transition~=ease-in-out]{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}

assets/play-worklet-CqUYQx_r.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var l=(s,e,t)=>e in s?c(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var n=(s,e,t)=>l(s,typeof e!="symbol"?e+"":e,t);class d extends AudioWorkletProcessor{constructor(){super();n(this,"bufferQueue",[]);n(this,"currentChunkOffset",0);n(this,"hadData",!1);this.bufferQueue=[],this.currentChunkOffset=0,this.hadData=!1,this.port.onmessage=t=>{const r=t.data;r instanceof Float32Array?(this.hadData=!0,this.bufferQueue.push(r)):r==="stop"&&(this.bufferQueue=[],this.currentChunkOffset=0)}}process(t,r){const f=r[0][0];if(!f)return!0;const h=f.length;let u=0;for(this.hadData&&this.bufferQueue.length===0&&(this.port.postMessage({type:"playback_ended"}),this.hadData=!1);u<h;)if(this.bufferQueue.length>0){const a=this.bufferQueue[0],o=a.length-this.currentChunkOffset,i=Math.min(o,h-u);f.set(a.subarray(this.currentChunkOffset,this.currentChunkOffset+i),u),this.currentChunkOffset+=i,u+=i,this.currentChunkOffset>=a.length&&(this.bufferQueue.shift(),this.currentChunkOffset=0)}else f.fill(0,u),u=h;return!0}}registerProcessor("buffered-audio-worklet-processor",d);

assets/vad-processor-0sEQXaXZ.js

@@ -0,0 +1 @@
+let s=0;const r=new Float32Array(512);class l extends AudioWorkletProcessor{process(o,n,f){const e=o[0][0];if(!e)return!1;if(e.length>512)this.port.postMessage({buffer:e});else{const t=512-s;e.length>=t?(r.set(e.subarray(0,t),s),this.port.postMessage({buffer:r}),r.fill(0),r.set(e.subarray(t),0),s=e.length-t):(r.set(e,s),s+=e.length)}return!0}}registerProcessor("vad-processor",l);

assets/worker-yoCrhISy.ts

@@ -0,0 +1,465 @@
+import type {
+  AutomaticSpeechRecognitionPipeline,
+  CausalLMOutputWithPast,
+  GPT2Tokenizer,
+  LlamaForCausalLM,
+  PreTrainedModel,
+  StoppingCriteriaList,
+} from '@huggingface/transformers'
+import type { Device, DType } from '@xsai-transformers/shared/types'
+import type { GenerateOptions } from 'kokoro-js'
+import type {
+  WorkerMessageEventError,
+  WorkerMessageEventInfo,
+  WorkerMessageEventOutput,
+  WorkerMessageEventProgress,
+  WorkerMessageEventSetVoiceResponse,
+  WorkerMessageEventStatus,
+} from '../types/worker'
+
+import {
+  // VAD
+  AutoModel,
+
+  AutoModelForCausalLM,
+  // LLM
+  AutoTokenizer,
+  InterruptableStoppingCriteria,
+  pipeline,
+
+  // Speech recognition
+  Tensor,
+  TextStreamer,
+} from '@huggingface/transformers'
+import { isWebGPUSupported } from 'gpuu/webgpu'
+import { KokoroTTS, TextSplitterStream } from 'kokoro-js'
+
+import {
+  EXIT_THRESHOLD,
+  INPUT_SAMPLE_RATE,
+  MAX_BUFFER_DURATION,
+  MAX_NUM_PREV_BUFFERS,
+  MIN_SILENCE_DURATION_SAMPLES,
+  MIN_SPEECH_DURATION_SAMPLES,
+  SPEECH_PAD_SAMPLES,
+  SPEECH_THRESHOLD,
+} from '../constants'
+
+interface Message {
+  role: 'system' | 'user' | 'assistant'
+  content: string
+}
+
+type Voices = GenerateOptions['voice']
+export type PretrainedConfig = NonNullable<Parameters<typeof AutoModel.from_pretrained>[1]>['config']
+
+const whisperDtypeMap: Record<Device, DType> = {
+  webgpu: {
+    encoder_model: 'fp32',
+    decoder_model_merged: 'fp32',
+  },
+  wasm: {
+    encoder_model: 'fp32',
+    decoder_model_merged: 'q8',
+  },
+}
+
+const model_id = 'onnx-community/Kokoro-82M-v1.0-ONNX'
+let voice: Voices | undefined
+let silero_vad: PreTrainedModel
+let transcriber: AutomaticSpeechRecognitionPipeline
+let tts: KokoroTTS
+
+const SYSTEM_MESSAGE: Message = {
+  role: 'system',
+  content:
+    'You\'re a helpful and conversational voice assistant. Keep your responses short, clear, and casual.',
+}
+let messages: Message[] = [SYSTEM_MESSAGE]
+let past_key_values_cache: any = null
+let stopping_criteria: InterruptableStoppingCriteria | null = null
+
+// Global audio buffer to store incoming audio
+const BUFFER = new Float32Array(MAX_BUFFER_DURATION * INPUT_SAMPLE_RATE)
+let bufferPointer = 0
+
+// Initial state for VAD
+const sr = new Tensor('int64', [INPUT_SAMPLE_RATE], [])
+let state = new Tensor('float32', new Float32Array(2 * 1 * 128), [2, 1, 128])
+
+// Whether we are in the process of adding audio to the buffer
+let isRecording = false
+let isPlaying = false // new flag
+
+let tokenizer: GPT2Tokenizer
+let llm: LlamaForCausalLM
+
+const prevBuffers: Float32Array[] = []
+
+export async function loadModels() {
+  tts = await KokoroTTS.from_pretrained(model_id, {
+    dtype: 'fp32',
+    device: 'webgpu',
+  })
+
+  const device = 'webgpu'
+  globalThis.postMessage({ type: 'info', data: { message: `Using device: "${device}"` } } satisfies WorkerMessageEventInfo)
+  globalThis.postMessage({ type: 'info', data: { message: 'Loading models...', duration: 'until_next' } } satisfies WorkerMessageEventInfo)
+
+  // Load models
+  silero_vad = await AutoModel.from_pretrained(
+    'onnx-community/silero-vad',
+    {
+      config: { model_type: 'custom' } as PretrainedConfig,
+      dtype: 'fp32', // Full-precision
+      progress_callback: progress => globalThis.postMessage({ type: 'progress', data: { message: progress } } satisfies WorkerMessageEventProgress),
+    },
+  ).catch((error: Error) => {
+    globalThis.postMessage({ type: 'error', data: { error, message: error.message } } satisfies WorkerMessageEventError<Error>)
+    throw error
+  })
+
+  transcriber = await pipeline(
+    'automatic-speech-recognition',
+    'onnx-community/whisper-base', // or "onnx-community/moonshine-base-ONNX",
+    {
+      device,
+      dtype: whisperDtypeMap[device as keyof typeof whisperDtypeMap],
+      progress_callback: progress => globalThis.postMessage({ type: 'progress', data: { message: progress } } satisfies WorkerMessageEventProgress),
+    },
+  ).catch((error: Error) => {
+    globalThis.postMessage({ type: 'error', data: { error, message: error.message } } satisfies WorkerMessageEventError<Error>)
+    throw error
+  })
+
+  await transcriber(new Float32Array(INPUT_SAMPLE_RATE)) // Compile shaders
+
+  llm = await AutoModelForCausalLM.from_pretrained(
+    'HuggingFaceTB/SmolLM2-1.7B-Instruct',
+    {
+      dtype: await isWebGPUSupported() ? 'q4f16' : 'int8',
+      device: await isWebGPUSupported() ? 'webgpu' : 'wasm',
+      progress_callback: progress => globalThis.postMessage({ type: 'progress', data: { message: progress } } satisfies WorkerMessageEventProgress),
+    },
+  ).catch((error: Error) => {
+    globalThis.postMessage({ type: 'error', data: { error, message: error.message } } satisfies WorkerMessageEventError<Error>)
+    throw error
+  })
+
+  tokenizer = await AutoTokenizer.from_pretrained(
+    'HuggingFaceTB/SmolLM2-1.7B-Instruct',
+  ).catch((error: Error) => {
+    globalThis.postMessage({ type: 'error', data: { error, message: error.message } } satisfies WorkerMessageEventError<Error>)
+    throw error
+  })
+
+  await llm.generate({ ...tokenizer('x'), max_new_tokens: 1 }) // Compile shaders
+
+  globalThis.postMessage({
+    type: 'status',
+    data: {
+      status: 'ready',
+      message: 'Ready!',
+      voices: tts.voices,
+    },
+  } as WorkerMessageEventStatus)
+}
+
+loadModels()
+
+/**
+ * Perform Voice Activity Detection (VAD)
+ * @param buffer The new audio buffer
+ * @returns `true` if the buffer is speech, `false` otherwise.
+ */
+async function vad(buffer?: Float32Array): Promise<boolean> {
+  if (!buffer) {
+    // Possibly closed or interrupted
+    return false
+  }
+
+  const input = new Tensor('float32', buffer, [1, buffer.length])
+
+  const { stateN, output } = await silero_vad({ input, sr, state })
+  state = stateN // Update state
+
+  const isSpeech = output.data[0]
+
+  // Use heuristics to determine if the buffer is speech or not
+  return (
+    // Case 1: We are above the threshold (definitely speech)
+    isSpeech > SPEECH_THRESHOLD
+    // Case 2: We are in the process of recording, and the probability is above the negative (exit) threshold
+    || (isRecording && isSpeech >= EXIT_THRESHOLD)
+  )
+}
+
+interface SpeechData {
+  start: number
+  end: number
+  duration: number
+}
+
+type BatchEncodingItem = number[] | number[][] | Tensor
+/**
+ * Holds the output of the tokenizer's call function.
+ */
+interface BatchEncoding {
+  /**
+   * List of token ids to be fed to a model.
+   */
+  input_ids: BatchEncodingItem
+  /**
+   * List of indices specifying which tokens should be attended to by the model.
+   */
+  attention_mask: BatchEncodingItem
+  /**
+   * List of token type ids to be fed to a model.
+   */
+  token_type_ids?: BatchEncodingItem
+}
+
+/**
+ * Transcribe the audio buffer
+ * @param buffer The audio buffer
+ * @param _data Additional data
+ */
+async function speechToSpeech(buffer: Float32Array, _data: SpeechData): Promise<void> {
+  isPlaying = true
+
+  // 1. Transcribe the audio from the user
+  const result = await transcriber(buffer)
+  const text = (result as { text: string }).text.trim()
+
+  if (['', '[BLANK_AUDIO]'].includes(text)) {
+    // If the transcription is empty or a blank audio, we skip the rest of the processing
+    return
+  }
+
+  messages.push({ role: 'user', content: text })
+
+  // Set up text-to-speech streaming
+  const splitter = new TextSplitterStream()
+  const stream = tts!.stream(splitter, { voice });
+  (async () => {
+    for await (const { text, audio } of stream) {
+      globalThis.postMessage({ type: 'output', data: { text, result: audio } } satisfies WorkerMessageEventOutput)
+    }
+  })()
+
+  // 2. Generate a response using the LLM
+  const inputs = tokenizer.apply_chat_template(messages, {
+    add_generation_prompt: true,
+    return_dict: true,
+  }) as BatchEncoding
+
+  const streamer = new TextStreamer(tokenizer, {
+    skip_prompt: true,
+    skip_special_tokens: true,
+    callback_function: (text: string) => {
+      splitter.push(text)
+    },
+    token_callback_function: () => {},
+  })
+
+  stopping_criteria = new InterruptableStoppingCriteria()
+  type GenerationFunctionParameters = Parameters<typeof llm.generate>[0] & Record<string, any>
+
+  const generatedRes = await llm.generate({
+    ...inputs,
+    past_key_values: past_key_values_cache,
+    do_sample: false, // TODO: do_sample: true is bugged (invalid data location on top-k sample)
+    max_new_tokens: 1024,
+    streamer,
+    stopping_criteria: stopping_criteria as unknown as StoppingCriteriaList,
+    return_dict_in_generate: true,
+  } as GenerationFunctionParameters)
+
+  const { past_key_values, sequences } = generatedRes as CausalLMOutputWithPast & { sequences: Tensor }
+  past_key_values_cache = past_key_values
+
+  // Finally, close the stream to signal that no more text will be added.
+  splitter.close()
+
+  const decoded = tokenizer.batch_decode(
+    // TODO: fix null as any
+    sequences.slice(null, [(inputs.input_ids as Tensor).dims[1], null as any]),
+    { skip_special_tokens: true },
+  )
+
+  messages.push({ role: 'assistant', content: decoded[0] })
+}
+
+// Track the number of samples after the last speech chunk
+let postSpeechSamples = 0
+function resetAfterRecording(offset = 0): void {
+  globalThis.postMessage({
+    type: 'status',
+    data: {
+      status: 'recording_end',
+      message: 'Transcribing...',
+      duration: 'until_next',
+    },
+  } satisfies WorkerMessageEventStatus)
+
+  BUFFER.fill(0, offset)
+  bufferPointer = offset
+  isRecording = false
+  postSpeechSamples = 0
+}
+
+function dispatchForTranscriptionAndResetAudioBuffer(overflow?: Float32Array): void {
+  // Get start and end time of the speech segment, minus the padding
+  const now = Date.now()
+  const end
+    = now - ((postSpeechSamples + SPEECH_PAD_SAMPLES) / INPUT_SAMPLE_RATE) * 1000
+  const start = end - (bufferPointer / INPUT_SAMPLE_RATE) * 1000
+  const duration = end - start
+  const overflowLength = overflow?.length ?? 0
+
+  // Send the audio buffer to the worker
+  const buffer = BUFFER.slice(0, bufferPointer + SPEECH_PAD_SAMPLES)
+
+  const prevLength = prevBuffers.reduce((acc, b) => acc + b.length, 0)
+  const paddedBuffer = new Float32Array(prevLength + buffer.length)
+  let offset = 0
+  for (const prev of prevBuffers) {
+    paddedBuffer.set(prev, offset)
+    offset += prev.length
+  }
+  paddedBuffer.set(buffer, offset)
+  speechToSpeech(paddedBuffer, { start, end, duration })
+
+  // Set overflow (if present) and reset the rest of the audio buffer
+  if (overflow) {
+    BUFFER.set(overflow, 0)
+  }
+  resetAfterRecording(overflowLength)
+}
+
+globalThis.onmessage = async (event: MessageEvent) => {
+  const { type, buffer } = event.data
+
+  // refuse new audio while playing back
+  if (type === 'audio' && isPlaying)
+    return
+
+  switch (type) {
+    case 'start_call': {
+      const name = tts!.voices[voice ?? 'af_heart']?.name ?? 'Heart'
+      greet(`Hey there, my name is ${name}! How can I help you today?`)
+      return
+    }
+    case 'end_call':
+      messages = [SYSTEM_MESSAGE]
+      past_key_values_cache = null
+      break
+    case 'interrupt':
+      stopping_criteria?.interrupt()
+      return
+    case 'set_voice':
+      voice = event.data.voice
+
+      globalThis.postMessage({
+        type: 'set_voice_response',
+        data: {
+          ok: true,
+        },
+      } satisfies WorkerMessageEventSetVoiceResponse)
+
+      return
+    case 'playback_ended':
+      isPlaying = false
+      return
+  }
+
+  const wasRecording = isRecording // Save current state
+  const isSpeech = await vad(buffer)
+
+  if (!wasRecording && !isSpeech) {
+    // We are not recording, and the buffer is not speech,
+    // so we will probably discard the buffer. So, we insert
+    // into a FIFO queue with maximum size of PREV_BUFFER_SIZE
+    if (prevBuffers.length >= MAX_NUM_PREV_BUFFERS) {
+      // If the queue is full, we discard the oldest buffer
+      prevBuffers.shift()
+    }
+    prevBuffers.push(buffer)
+    return
+  }
+
+  const remaining = BUFFER.length - bufferPointer
+  if (buffer.length >= remaining) {
+    // The buffer is larger than (or equal to) the remaining space in the global buffer,
+    // so we perform transcription and copy the overflow to the global buffer
+    BUFFER.set(buffer.subarray(0, remaining), bufferPointer)
+    bufferPointer += remaining
+
+    // Dispatch the audio buffer
+    const overflow = buffer.subarray(remaining)
+    dispatchForTranscriptionAndResetAudioBuffer(overflow)
+    return
+  }
+  else {
+    // The buffer is smaller than the remaining space in the global buffer,
+    // so we copy it to the global buffer
+    BUFFER.set(buffer, bufferPointer)
+    bufferPointer += buffer.length
+  }
+
+  if (isSpeech) {
+    if (!isRecording) {
+      // Indicate start of recording
+      globalThis.postMessage({
+        type: 'status',
+        data: {
+          status: 'recording_start',
+          message: 'Listening...',
+          duration: 'until_next',
+        },
+      } satisfies WorkerMessageEventStatus)
+    }
+
+    // Start or continue recording
+    isRecording = true
+    postSpeechSamples = 0 // Reset the post-speech samples
+
+    return
+  }
+
+  postSpeechSamples += buffer.length
+
+  // At this point we're confident that we were recording (wasRecording === true), but the latest buffer is not speech.
+  // So, we check whether we have reached the end of the current audio chunk.
+  if (postSpeechSamples < MIN_SILENCE_DURATION_SAMPLES) {
+    // There was a short pause, but not long enough to consider the end of a speech chunk
+    // (e.g., the speaker took a breath), so we continue recording
+    return
+  }
+
+  if (bufferPointer < MIN_SPEECH_DURATION_SAMPLES) {
+    // The entire buffer (including the new chunk) is smaller than the minimum
+    // duration of a speech chunk, so we can safely discard the buffer.
+    resetAfterRecording()
+    return
+  }
+
+  dispatchForTranscriptionAndResetAudioBuffer()
+}
+
+function greet(text: string): void {
+  isPlaying = true
+
+  const splitter = new TextSplitterStream()
+  const stream = tts!.stream(splitter, { voice });
+
+  (async () => {
+    for await (const { text: chunkText, audio } of stream) {
+      globalThis.postMessage({ type: 'output', data: { text: chunkText, result: audio } } satisfies WorkerMessageEventOutput)
+    }
+  })()
+
+  splitter.push(text)
+  splitter.close()
+  messages.push({ role: 'assistant', content: text })
+}

index.html

@@ -1,19 +1,24 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Realtime Conversational WebGPU (Vue)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script>
+      ;(function () {
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
+        if (setting === 'dark' || (prefersDark && setting !== 'light'))
+          document.documentElement.classList.toggle('dark', true)
+      })()
+    </script>
+    <script type="module" crossorigin src="/assets/index-DGmKQH7N.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-cAxkOY9l.css">
+  </head>
+  <body class="font-sans">
+    <div id="app"></div>
+    <noscript> This website requires JavaScript to function properly. Please enable JavaScript to continue. </noscript>
+  </body>
 </html>

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}