import{s as Gs,o as Ws,n as x}from"../chunks/scheduler.ddeee2a5.js";import{S as $s,i as Qs,e as u,s as U,c as m,h as vs,a as h,d as p,b as o,f as ds,g as d,j as B,k as js,l as V,m as j,n as A,t as g,o as f,p as b}from"../chunks/index.10b70568.js";import{C as Ss}from"../chunks/CopyLLMTxtMenu.68696f97.js";import{C as X}from"../chunks/CodeBlock.7ca4c11d.js";import{H as K,E as Rs}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.d66d689f.js";import{H as Ms,a as _}from"../chunks/HfOption.1e773499.js";function ks(Z){let l,y="<strong>Tech Stack</strong>: Gradio (for the UI) + Inference Providers (for the AI)";return{c(){l=u("p"),l.innerHTML=y},l(e){l=h(e,"P",{"data-svelte-h":!0}),B(l)!=="svelte-6re1qd"&&(l.innerHTML=y)},m(e,t){j(e,l,t)},p:x,d(e){e&&p(l)}}}function zs(Z){let l,y="<strong>Tech Stack</strong>: HTML/JavaScript (for the UI) + Inference Providers (for the AI)",e,t,s='We’ll use HTML and JavaScript for the UI just to keep things simple and agnostic, but if you want to see more mature examples, you can check out the <a href="https://huggingface.co/huggingfacejs/spaces" rel="nofollow">Hugging Face JS spaces</a> page.';return{c(){l=u("p"),l.innerHTML=y,e=U(),t=u("p"),t.innerHTML=s},l(n){l=h(n,"P",{"data-svelte-h":!0}),B(l)!=="svelte-scf74u"&&(l.innerHTML=y),e=o(n),t=h(n,"P",{"data-svelte-h":!0}),B(t)!=="svelte-180edvt"&&(t.innerHTML=s)},m(n,c){j(n,l,c),j(n,e,c),j(n,t,c)},p:x,d(n){n&&(p(l),p(e),p(t))}}}function Vs(Z){let l,y,e,t;return l=new _({props:{id:"tech-stack",option:"python",$$slots:{default:[ks]},$$scope:{ctx:Z}}}),e=new _({props:{id:"tech-stack",option:"javascript",$$slots:{default:[zs]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),y=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),y=o(s),d(e.$$.fragment,s)},m(s,n){A(l,s,n),j(s,y,n),A(e,s,n),t=!0},p(s,n){const c={};n&2&&(c.$$scope={dirty:n,ctx:s}),l.$set(c);const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),e.$set(i)},i(s){t||(g(l.$$.fragment,s),g(e.$$.fragment,s),t=!0)},o(s){f(l.$$.fragment,s),f(e.$$.fragment,s),t=!1},d(s){s&&p(y),b(l,s),b(e,s)}}}function Ys(Z){let l,y="Before we start coding, authenticate with Hugging Face using the CLI:",e,t,s,n,c='When prompted, paste your Hugging Face token. This handles authentication automatically for all your inference calls. You can generate one from <a href="https://huggingface.co/settings/tokens/new?ownUserPermissions=inference.serverless.write&amp;tokenType=fineGrained" rel="nofollow">your settings page</a>.',i;return t=new X({props:{code:"cGlwJTIwaW5zdGFsbCUyMGh1Z2dpbmdmYWNlX2h1YiUwQWhmJTIwYXV0aCUyMGxvZ2lu",highlighted:`pip install huggingface_hub
hf auth login`,wrap:!1}}),{c(){l=u("p"),l.textContent=y,e=U(),m(t.$$.fragment),s=U(),n=u("p"),n.innerHTML=c},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-1frpmc9"&&(l.textContent=y),e=o(M),d(t.$$.fragment,M),s=o(M),n=h(M,"P",{"data-svelte-h":!0}),B(n)!=="svelte-7amyfj"&&(n.innerHTML=c)},m(M,T){j(M,l,T),j(M,e,T),A(t,M,T),j(M,s,T),j(M,n,T),i=!0},p:x,i(M){i||(g(t.$$.fragment,M),i=!0)},o(M){f(t.$$.fragment,M),i=!1},d(M){M&&(p(l),p(e),p(s),p(n)),b(t,M)}}}function Xs(Z){let l,y='You’ll need your Hugging Face token. Get one from <a href="https://huggingface.co/settings/tokens/new?ownUserPermissions=inference.serverless.write&amp;tokenType=fineGrained" rel="nofollow">your settings page</a>. We can set it as an environment variable in our app.',e,t,s,n,c,i,M="<p>When we deploy our app to Hugging Face Spaces, we’ll need to add our token as a secret. This is a secure way to handle the token and avoid exposing it in the code.</p>",T;return t=new X({props:{code:"ZXhwb3J0JTIwSEZfVE9LRU4lM0QlMjJ5b3VyX3Rva2VuX2hlcmUlMjI=",highlighted:'<span class="hljs-built_in">export</span> HF_TOKEN=<span class="hljs-string">&quot;your_token_here&quot;</span>',wrap:!1}}),n=new X({props:{code:"JTJGJTJGJTIwQWRkJTIweW91ciUyMHRva2VuJTIwYXQlMjB0aGUlMjB0b3AlMjBvZiUyMHlvdXIlMjBzY3JpcHQlMEFjb25zdCUyMEhGX1RPS0VOJTIwJTNEJTIwcHJvY2Vzcy5lbnYuSEZfVE9LRU4lM0I=",highlighted:`<span class="hljs-comment">// Add your token at the top of your script</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">HF_TOKEN</span> = process.<span class="hljs-property">env</span>.<span class="hljs-property">HF_TOKEN</span>;`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=y,e=U(),m(t.$$.fragment),s=U(),m(n.$$.fragment),c=U(),i=u("blockquote"),i.innerHTML=M,this.h()},l(C){l=h(C,"P",{"data-svelte-h":!0}),B(l)!=="svelte-72y8m9"&&(l.innerHTML=y),e=o(C),d(t.$$.fragment,C),s=o(C),d(n.$$.fragment,C),c=o(C),i=h(C,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),B(i)!=="svelte-fc92om"&&(i.innerHTML=M),this.h()},h(){js(i,"class","warning")},m(C,N){j(C,l,N),j(C,e,N),A(t,C,N),j(C,s,N),A(n,C,N),j(C,c,N),j(C,i,N),T=!0},p:x,i(C){T||(g(t.$$.fragment,C),g(n.$$.fragment,C),T=!0)},o(C){f(t.$$.fragment,C),f(n.$$.fragment,C),T=!1},d(C){C&&(p(l),p(e),p(s),p(c),p(i)),b(t,C),b(n,C)}}}function _s(Z){let l,y,e,t;return l=new _({props:{id:"auth",option:"python",$$slots:{default:[Ys]},$$scope:{ctx:Z}}}),e=new _({props:{id:"auth",option:"javascript",$$slots:{default:[Xs]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),y=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),y=o(s),d(e.$$.fragment,s)},m(s,n){A(l,s,n),j(s,y,n),A(e,s,n),t=!0},p(s,n){const c={};n&2&&(c.$$scope={dirty:n,ctx:s}),l.$set(c);const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),e.$set(i)},i(s){t||(g(l.$$.fragment,s),g(e.$$.fragment,s),t=!0)},o(s){f(l.$$.fragment,s),f(e.$$.fragment,s),t=!1},d(s){s&&p(y),b(l,s),b(e,s)}}}function xs(Z){let l,y="Now let’s create a simple web interface using Gradio:",e,t,s,n,c="Here we’re using Gradio’s <code>gr.Audio</code> component to either upload an audio file or use the microphone input. We’re keeping things simple with two outputs: a transcript and a summary with action items.",i;return t=new X({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQWZyb20lMjBodWdnaW5nZmFjZV9odWIlMjBpbXBvcnQlMjBJbmZlcmVuY2VDbGllbnQlMEElMEFkZWYlMjBwcm9jZXNzX21lZXRpbmdfYXVkaW8oYXVkaW9fZmlsZSklM0ElMEElMjAlMjAlMjAlMjAlMjIlMjIlMjJQcm9jZXNzJTIwdXBsb2FkZWQlMjBhdWRpbyUyMGZpbGUlMjBhbmQlMjByZXR1cm4lMjB0cmFuc2NyaXB0JTIwJTJCJTIwc3VtbWFyeSUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGlmJTIwYXVkaW9fZmlsZSUyMGlzJTIwTm9uZSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHJldHVybiUyMCUyMlBsZWFzZSUyMHVwbG9hZCUyMGFuJTIwYXVkaW8lMjBmaWxlLiUyMiUyQyUyMCUyMiUyMiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMyUyMFdlJ2xsJTIwaW1wbGVtZW50JTIwdGhlJTIwQUklMjBsb2dpYyUyMG5leHQlMEElMjAlMjAlMjAlMjByZXR1cm4lMjAlMjJUcmFuc2NyaXB0JTIwd2lsbCUyMGFwcGVhciUyMGhlcmUuLi4lMjIlMkMlMjAlMjJTdW1tYXJ5JTIwd2lsbCUyMGFwcGVhciUyMGhlcmUuLi4lMjIlMEElMEElMjMlMjBDcmVhdGUlMjB0aGUlMjBHcmFkaW8lMjBpbnRlcmZhY2UlMEFhcHAlMjAlM0QlMjBnci5JbnRlcmZhY2UoJTBBJTIwJTIwJTIwJTIwZm4lM0Rwcm9jZXNzX21lZXRpbmdfYXVkaW8lMkMlMEElMjAlMjAlMjAlMjBpbnB1dHMlM0Rnci5BdWRpbyhsYWJlbCUzRCUyMlVwbG9hZCUyME1lZXRpbmclMjBBdWRpbyUyMiUyQyUyMHR5cGUlM0QlMjJmaWxlcGF0aCUyMiklMkMlMEElMjAlMjAlMjAlMjBvdXRwdXRzJTNEJTVCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZ3IuVGV4dGJveChsYWJlbCUzRCUyMlRyYW5zY3JpcHQlMjIlMkMlMjBsaW5lcyUzRDEwKSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGdyLlRleHRib3gobGFiZWwlM0QlMjJTdW1tYXJ5JTIwJTI2JTIwQWN0aW9uJTIwSXRlbXMlMjIlMkMlMjBsaW5lcyUzRDgpJTBBJTIwJTIwJTIwJTIwJTVEJTJDJTBBJTIwJTIwJTIwJTIwdGl0bGUlM0QlMjIlRjAlOUYlOEUlQTQlMjBBSSUyME1lZXRpbmclMjBOb3RlcyUyMiUyQyUwQSUyMCUyMCUyMCUyMGRlc2NyaXB0aW9uJTNEJTIyVXBsb2FkJTIwYW4lMjBhdWRpbyUyMGZpbGUlMjB0byUyMGdldCUyMGFuJTIwaW5zdGFudCUyMHRyYW5zY3JpcHQlMjBhbmQlMjBzdW1tYXJ5JTIwd2l0aCUyMGFjdGlvbiUyMGl0ZW1zLiUyMiUwQSklMEElMEFpZiUyMF9fbmFtZV9fJTIwJTNEJTNEJTIwJTIyX19tYWluX18lMjIlM0ElMEElMjAlMjAlMjAlMjBhcHAubGF1bmNoKCk=",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> InferenceClient

<span class="hljs-keyword">def</span> <span class="hljs-title function_">process_meeting_audio</span>(<span class="hljs-params">audio_file</span>):
    <span class="hljs-string">&quot;&quot;&quot;Process uploaded audio file and return transcript + summary&quot;&quot;&quot;</span>
    <span class="hljs-keyword">if</span> audio_file <span class="hljs-keyword">is</span> <span class="hljs-literal">None</span>:
        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Please upload an audio file.&quot;</span>, <span class="hljs-string">&quot;&quot;</span>
    
    <span class="hljs-comment"># We&#x27;ll implement the AI logic next</span>
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Transcript will appear here...&quot;</span>, <span class="hljs-string">&quot;Summary will appear here...&quot;</span>

<span class="hljs-comment"># Create the Gradio interface</span>
app = gr.Interface(
    fn=process_meeting_audio,
    inputs=gr.Audio(label=<span class="hljs-string">&quot;Upload Meeting Audio&quot;</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>),
    outputs=[
        gr.Textbox(label=<span class="hljs-string">&quot;Transcript&quot;</span>, lines=<span class="hljs-number">10</span>),
        gr.Textbox(label=<span class="hljs-string">&quot;Summary &amp; Action Items&quot;</span>, lines=<span class="hljs-number">8</span>)
    ],
    title=<span class="hljs-string">&quot;🎤 AI Meeting Notes&quot;</span>,
    description=<span class="hljs-string">&quot;Upload an audio file to get an instant transcript and summary with action items.&quot;</span>
)

<span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">&quot;__main__&quot;</span>:
    app.launch()`,wrap:!1}}),{c(){l=u("p"),l.textContent=y,e=U(),m(t.$$.fragment),s=U(),n=u("p"),n.innerHTML=c},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-agnmrx"&&(l.textContent=y),e=o(M),d(t.$$.fragment,M),s=o(M),n=h(M,"P",{"data-svelte-h":!0}),B(n)!=="svelte-mdm151"&&(n.innerHTML=c)},m(M,T){j(M,l,T),j(M,e,T),A(t,M,T),j(M,s,T),j(M,n,T),i=!0},p:x,i(M){i||(g(t.$$.fragment,M),i=!0)},o(M){f(t.$$.fragment,M),i=!1},d(M){M&&(p(l),p(e),p(s),p(n)),b(t,M)}}}function Hs(Z){let l,y="For JavaScript, we’ll create a clean HTML interface with native file upload and a simple loading state:",e,t,s,n,c="This creates a clean drag-and-drop interface with styled results sections for the transcript and summary.",i,M,T="Our application can then use the <code>InferenceClient</code> from <code>huggingface.js</code> to call the transcription and summarization functions.",C,N,W,S,$="We’ll also need to implement the <code>transcribe</code> and <code>summarize</code> functions.",E;return t=new X({props:{code:"JTNDYm9keSUzRSUwQSUyMCUyMCUyMCUyMCUzQ2gxJTNFJUYwJTlGJThFJUE0JTIwQUklMjBNZWV0aW5nJTIwTm90ZXMlM0MlMkZoMSUzRSUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIydXBsb2FkJTIyJTIwb25jbGljayUzRCUyMmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdmaWxlJykuY2xpY2soKSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMmZpbGUlMjIlMjBpZCUzRCUyMmZpbGUlMjIlMjBhY2NlcHQlM0QlMjJhdWRpbyUyRiolMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NwJTNFVXBsb2FkJTIwYXVkaW8lMjBmaWxlJTNDJTJGcCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2J1dHRvbiUyMHR5cGUlM0QlMjJidXR0b24lMjIlM0VDaG9vc2UlMjBGaWxlJTNDJTJGYnV0dG9uJTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJsb2FkaW5nJTIyJTIwaWQlM0QlMjJsb2FkaW5nJTIyJTNFUHJvY2Vzc2luZy4uLiUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIycmVzdWx0cyUyMiUyMGlkJTNEJTIycmVzdWx0cyUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIycmVzdWx0JTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaDMlM0UlRjAlOUYlOTMlOUQlMjBUcmFuc2NyaXB0JTNDJTJGaDMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBpZCUzRCUyMnRyYW5zY3JpcHQlMjIlM0UlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnJlc3VsdCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2gzJTNFJUYwJTlGJTkzJThCJTIwU3VtbWFyeSUzQyUyRmgzJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwaWQlM0QlMjJzdW1tYXJ5JTIyJTNFJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGYm9keSUzRQ==",highlighted:`<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>🎤 AI Meeting Notes<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
    
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;upload&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;document.getElementById(&#x27;file&#x27;).click()&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;audio/*&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Upload audio file<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>Choose File<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;loading&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;loading&quot;</span>&gt;</span>Processing...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;results&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;result&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>📝 Transcript<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;transcript&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;result&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>📋 Summary<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;summary&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>`,wrap:!1}}),N=new X({props:{code:"aW1wb3J0JTIwJTdCJTIwSW5mZXJlbmNlQ2xpZW50JTIwJTdEJTIwZnJvbSUyMCdodHRwcyUzQSUyRiUyRmVzbS5zaCUyRiU0MGh1Z2dpbmdmYWNlJTJGaW5mZXJlbmNlJyUzQiUwQSUwQSUyRiUyRiUyMEFjY2VzcyUyMHRoZSUyMHRva2VuJTIwZnJvbSUyMEh1Z2dpbmclMjBGYWNlJTIwU3BhY2VzJTIwc2VjcmV0cyUwQWNvbnN0JTIwSEZfVE9LRU4lMjAlM0QlMjB3aW5kb3cuaHVnZ2luZ2ZhY2UlM0YudmFyaWFibGVzJTNGLkhGX1RPS0VOJTNCJTBBJTJGJTJGJTIwT3IlMjBpZiUyMHlvdSdyZSUyMHJ1bm5pbmclMjBsb2NhbGx5JTJDJTIweW91JTIwY2FuJTIwc2V0JTIwaXQlMjBhcyUyMGFuJTIwZW52aXJvbm1lbnQlMjB2YXJpYWJsZSUwQSUyRiUyRiUyMGNvbnN0JTIwSEZfVE9LRU4lMjAlM0QlMjBwcm9jZXNzLmVudi5IRl9UT0tFTiUzQiUwQSUwQWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdmaWxlJykub25jaGFuZ2UlMjAlM0QlMjBhc3luYyUyMChlKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMCUyMCUyMGlmJTIwKCFlLnRhcmdldC5maWxlcyU1QjAlNUQpJTIwcmV0dXJuJTNCJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwY29uc3QlMjBmaWxlJTIwJTNEJTIwZS50YXJnZXQuZmlsZXMlNUIwJTVEJTNCJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwc2hvdyhkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbG9hZGluZycpKSUzQiUwQSUyMCUyMCUyMCUyMGhpZGUoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Jlc3VsdHMnKSUyQyUyMGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdlcnJvcicpKSUzQiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMHRyeSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGNvbnN0JTIwdHJhbnNjcmlwdCUyMCUzRCUyMGF3YWl0JTIwdHJhbnNjcmliZShmaWxlKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGNvbnN0JTIwc3VtbWFyeSUyMCUzRCUyMGF3YWl0JTIwc3VtbWFyaXplKHRyYW5zY3JpcHQpJTNCJTBBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RyYW5zY3JpcHQnKS50ZXh0Q29udGVudCUyMCUzRCUyMHRyYW5zY3JpcHQlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3VtbWFyeScpLnRleHRDb250ZW50JTIwJTNEJTIwc3VtbWFyeSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGhpZGUoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2xvYWRpbmcnKSklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzaG93KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdyZXN1bHRzJykpJTNCJTBBJTIwJTIwJTIwJTIwJTdEJTIwY2F0Y2glMjAoZXJyb3IpJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaGlkZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbG9hZGluZycpKSUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHNob3dFcnJvciglNjBFcnJvciUzQSUyMCUyNCU3QmVycm9yLm1lc3NhZ2UlN0QlNjApJTNCJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTdEJTNC",highlighted:`<span class="hljs-keyword">import</span> { <span class="hljs-title class_">InferenceClient</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://esm.sh/@huggingface/inference&#x27;</span>;

<span class="hljs-comment">// Access the token from Hugging Face Spaces secrets</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">HF_TOKEN</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">huggingface</span>?.<span class="hljs-property">variables</span>?.<span class="hljs-property">HF_TOKEN</span>;
<span class="hljs-comment">// Or if you&#x27;re running locally, you can set it as an environment variable</span>
<span class="hljs-comment">// const HF_TOKEN = ({}).HF_TOKEN;</span>

<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;file&#x27;</span>).<span class="hljs-property">onchange</span> = <span class="hljs-keyword">async</span> (e) =&gt; {
    <span class="hljs-keyword">if</span> (!e.<span class="hljs-property">target</span>.<span class="hljs-property">files</span>[<span class="hljs-number">0</span>]) <span class="hljs-keyword">return</span>;
    
    <span class="hljs-keyword">const</span> file = e.<span class="hljs-property">target</span>.<span class="hljs-property">files</span>[<span class="hljs-number">0</span>];
    
    <span class="hljs-title function_">show</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;loading&#x27;</span>));
    <span class="hljs-title function_">hide</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;results&#x27;</span>), <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;error&#x27;</span>));
    
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">const</span> transcript = <span class="hljs-keyword">await</span> <span class="hljs-title function_">transcribe</span>(file);
        <span class="hljs-keyword">const</span> summary = <span class="hljs-keyword">await</span> <span class="hljs-title function_">summarize</span>(transcript);

        <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;transcript&#x27;</span>).<span class="hljs-property">textContent</span> = transcript;
        <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;summary&#x27;</span>).<span class="hljs-property">textContent</span> = summary;
        
        <span class="hljs-title function_">hide</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;loading&#x27;</span>));
        <span class="hljs-title function_">show</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;results&#x27;</span>));
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-title function_">hide</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;loading&#x27;</span>));
        <span class="hljs-title function_">showError</span>(<span class="hljs-string">\`Error: <span class="hljs-subst">\${error.message}</span>\`</span>);
    }
};`,wrap:!1}}),{c(){l=u("p"),l.textContent=y,e=U(),m(t.$$.fragment),s=U(),n=u("p"),n.textContent=c,i=U(),M=u("p"),M.innerHTML=T,C=U(),m(N.$$.fragment),W=U(),S=u("p"),S.innerHTML=$},l(w){l=h(w,"P",{"data-svelte-h":!0}),B(l)!=="svelte-vgyqps"&&(l.textContent=y),e=o(w),d(t.$$.fragment,w),s=o(w),n=h(w,"P",{"data-svelte-h":!0}),B(n)!=="svelte-cuvxj4"&&(n.textContent=c),i=o(w),M=h(w,"P",{"data-svelte-h":!0}),B(M)!=="svelte-1j055fb"&&(M.innerHTML=T),C=o(w),d(N.$$.fragment,w),W=o(w),S=h(w,"P",{"data-svelte-h":!0}),B(S)!=="svelte-160ro2n"&&(S.innerHTML=$)},m(w,G){j(w,l,G),j(w,e,G),A(t,w,G),j(w,s,G),j(w,n,G),j(w,i,G),j(w,M,G),j(w,C,G),A(N,w,G),j(w,W,G),j(w,S,G),E=!0},p:x,i(w){E||(g(t.$$.fragment,w),g(N.$$.fragment,w),E=!0)},o(w){f(t.$$.fragment,w),f(N.$$.fragment,w),E=!1},d(w){w&&(p(l),p(e),p(s),p(n),p(i),p(M),p(C),p(W),p(S)),b(t,w),b(N,w)}}}function Fs(Z){let l,y,e,t;return l=new _({props:{id:"ui",option:"python",$$slots:{default:[xs]},$$scope:{ctx:Z}}}),e=new _({props:{id:"ui",option:"javascript",$$slots:{default:[Hs]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),y=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),y=o(s),d(e.$$.fragment,s)},m(s,n){A(l,s,n),j(s,y,n),A(e,s,n),t=!0},p(s,n){const c={};n&2&&(c.$$scope={dirty:n,ctx:s}),l.$set(c);const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),e.$set(i)},i(s){t||(g(l.$$.fragment,s),g(e.$$.fragment,s),t=!0)},o(s){f(l.$$.fragment,s),f(e.$$.fragment,s),t=!1},d(s){s&&p(y),b(l,s),b(e,s)}}}function qs(Z){let l,y="Now let’s implement the transcription using OpenAI’s <code>whisper-large-v3</code> model for fast, reliable speech processing.",e,t,s='<p>We’ll use the <code>auto</code> provider to automatically select the first available provider for the model. You can define your own priority list of providers in the <a href="https://huggingface.co/settings/inference-providers" rel="nofollow">Inference Providers</a> page.</p>',n,c,i;return c=new X({props:{code:"ZGVmJTIwdHJhbnNjcmliZV9hdWRpbyhhdWRpb19maWxlX3BhdGgpJTNBJTBBJTIwJTIwJTIwJTIwJTIyJTIyJTIyVHJhbnNjcmliZSUyMGF1ZGlvJTIwdXNpbmclMjBmYWwuYWklMjBmb3IlMjBzcGVlZCUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGNsaWVudCUyMCUzRCUyMEluZmVyZW5jZUNsaWVudChwcm92aWRlciUzRCUyMmF1dG8lMjIpJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIzJTIwUGFzcyUyMHRoZSUyMGZpbGUlMjBwYXRoJTIwZGlyZWN0bHklMjAtJTIwdGhlJTIwY2xpZW50JTIwaGFuZGxlcyUyMGZpbGUlMjByZWFkaW5nJTBBJTIwJTIwJTIwJTIwdHJhbnNjcmlwdCUyMCUzRCUyMGNsaWVudC5hdXRvbWF0aWNfc3BlZWNoX3JlY29nbml0aW9uKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGF1ZGlvJTNEYXVkaW9fZmlsZV9wYXRoJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbW9kZWwlM0QlMjJvcGVuYWklMkZ3aGlzcGVyLWxhcmdlLXYzJTIyJTBBJTIwJTIwJTIwJTIwKSUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHRyYW5zY3JpcHQudGV4dA==",highlighted:`<span class="hljs-keyword">def</span> <span class="hljs-title function_">transcribe_audio</span>(<span class="hljs-params">audio_file_path</span>):
    <span class="hljs-string">&quot;&quot;&quot;Transcribe audio using fal.ai for speed&quot;&quot;&quot;</span>
    client = InferenceClient(provider=<span class="hljs-string">&quot;auto&quot;</span>)
    
    <span class="hljs-comment"># Pass the file path directly - the client handles file reading</span>
    transcript = client.automatic_speech_recognition(
        audio=audio_file_path,
        model=<span class="hljs-string">&quot;openai/whisper-large-v3&quot;</span>
    )
    
    <span class="hljs-keyword">return</span> transcript.text`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=y,e=U(),t=u("blockquote"),t.innerHTML=s,n=U(),m(c.$$.fragment),this.h()},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-yyu0ez"&&(l.innerHTML=y),e=o(M),t=h(M,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),B(t)!=="svelte-ha8e8i"&&(t.innerHTML=s),n=o(M),d(c.$$.fragment,M),this.h()},h(){js(t,"class","tip")},m(M,T){j(M,l,T),j(M,e,T),j(M,t,T),j(M,n,T),A(c,M,T),i=!0},p:x,i(M){i||(g(c.$$.fragment,M),i=!0)},o(M){f(c.$$.fragment,M),i=!1},d(M){M&&(p(l),p(e),p(t),p(n)),b(c,M)}}}function Ls(Z){let l,y="Now let’s implement the transcription using OpenAI’s <code>whisper-large-v3</code> model for fast, reliable speech processing.",e,t,s='<p>We’ll use the <code>auto</code> provider to automatically select the first available provider for the model. You can define your own priority list of providers in the <a href="https://huggingface.co/settings/inference-providers" rel="nofollow">Inference Providers</a> page.</p>',n,c,i;return c=new X({props:{code:"aW1wb3J0JTIwJTdCJTIwSW5mZXJlbmNlQ2xpZW50JTIwJTdEJTIwZnJvbSUyMCdodHRwcyUzQSUyRiUyRmVzbS5zaCUyRiU0MGh1Z2dpbmdmYWNlJTJGaW5mZXJlbmNlJyUzQiUwQSUwQWFzeW5jJTIwZnVuY3Rpb24lMjB0cmFuc2NyaWJlKGZpbGUpJTIwJTdCJTBBJTIwJTIwJTIwJTIwY29uc3QlMjBjbGllbnQlMjAlM0QlMjBuZXclMjBJbmZlcmVuY2VDbGllbnQoSEZfVE9LRU4pJTNCJTBBJTBBJTIwJTIwJTIwJTIwY29uc3QlMjBvdXRwdXQlMjAlM0QlMjBhd2FpdCUyMGNsaWVudC5hdXRvbWF0aWNTcGVlY2hSZWNvZ25pdGlvbiglN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBkYXRhJTNBJTIwZmlsZSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMG1vZGVsJTNBJTIwJTIyb3BlbmFpJTJGd2hpc3Blci1sYXJnZS12My10dXJibyUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHByb3ZpZGVyJTNBJTIwJTIyYXV0byUyMiUwQSUyMCUyMCUyMCUyMCU3RCklM0IlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjByZXR1cm4lMjBvdXRwdXQudGV4dCUyMCU3QyU3QyUyMG91dHB1dCUyMCU3QyU3QyUyMCdUcmFuc2NyaXB0aW9uJTIwY29tcGxldGVkJyUzQiUwQSU3RA==",highlighted:`<span class="hljs-keyword">import</span> { <span class="hljs-title class_">InferenceClient</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://esm.sh/@huggingface/inference&#x27;</span>;

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">transcribe</span>(<span class="hljs-params">file</span>) {
    <span class="hljs-keyword">const</span> client = <span class="hljs-keyword">new</span> <span class="hljs-title class_">InferenceClient</span>(<span class="hljs-variable constant_">HF_TOKEN</span>);

    <span class="hljs-keyword">const</span> output = <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">automaticSpeechRecognition</span>({
        <span class="hljs-attr">data</span>: file,
        <span class="hljs-attr">model</span>: <span class="hljs-string">&quot;openai/whisper-large-v3-turbo&quot;</span>,
        <span class="hljs-attr">provider</span>: <span class="hljs-string">&quot;auto&quot;</span>
    });
    
    <span class="hljs-keyword">return</span> output.<span class="hljs-property">text</span> || output || <span class="hljs-string">&#x27;Transcription completed&#x27;</span>;
}`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=y,e=U(),t=u("blockquote"),t.innerHTML=s,n=U(),m(c.$$.fragment),this.h()},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-yyu0ez"&&(l.innerHTML=y),e=o(M),t=h(M,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),B(t)!=="svelte-ha8e8i"&&(t.innerHTML=s),n=o(M),d(c.$$.fragment,M),this.h()},h(){js(t,"class","tip")},m(M,T){j(M,l,T),j(M,e,T),j(M,t,T),j(M,n,T),A(c,M,T),i=!0},p:x,i(M){i||(g(c.$$.fragment,M),i=!0)},o(M){f(c.$$.fragment,M),i=!1},d(M){M&&(p(l),p(e),p(t),p(n)),b(c,M)}}}function Ds(Z){let l,y,e,t;return l=new _({props:{id:"transcription",option:"python",$$slots:{default:[qs]},$$scope:{ctx:Z}}}),e=new _({props:{id:"transcription",option:"javascript",$$slots:{default:[Ls]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),y=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),y=o(s),d(e.$$.fragment,s)},m(s,n){A(l,s,n),j(s,y,n),A(e,s,n),t=!0},p(s,n){const c={};n&2&&(c.$$scope={dirty:n,ctx:s}),l.$set(c);const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),e.$set(i)},i(s){t||(g(l.$$.fragment,s),g(e.$$.fragment,s),t=!0)},o(s){f(l.$$.fragment,s),f(e.$$.fragment,s),t=!1},d(s){s&&p(y),b(l,s),b(e,s)}}}function Ks(Z){let l,y=`Next, we’ll use a powerful language model like <code>deepseek-ai/DeepSeek-R1-0528</code> from DeepSeek via an Inference Provider, and just like in the previous step, we’ll use the <code>auto</code> provider to automatically select the first available provider for the model.
We will define a custom prompt to ensure the output is formatted as a summary with action items and decisions made:`,e,t,s;return t=new X({props:{code:"ZGVmJTIwZ2VuZXJhdGVfc3VtbWFyeSh0cmFuc2NyaXB0KSUzQSUwQSUyMCUyMCUyMCUyMCUyMiUyMiUyMkdlbmVyYXRlJTIwc3VtbWFyeSUyMHVzaW5nJTIwYW4lMjBJbmZlcmVuY2UlMjBQcm92aWRlciUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGNsaWVudCUyMCUzRCUyMEluZmVyZW5jZUNsaWVudChwcm92aWRlciUzRCUyMmF1dG8lMjIpJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwcHJvbXB0JTIwJTNEJTIwZiUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMEFuYWx5emUlMjB0aGlzJTIwbWVldGluZyUyMHRyYW5zY3JpcHQlMjBhbmQlMjBwcm92aWRlJTNBJTBBJTIwJTIwJTIwJTIwMS4lMjBBJTIwY29uY2lzZSUyMHN1bW1hcnklMjBvZiUyMGtleSUyMHBvaW50cyUwQSUyMCUyMCUyMCUyMDIuJTIwQWN0aW9uJTIwaXRlbXMlMjB3aXRoJTIwcmVzcG9uc2libGUlMjBwYXJ0aWVzJTBBJTIwJTIwJTIwJTIwMy4lMjBJbXBvcnRhbnQlMjBkZWNpc2lvbnMlMjBtYWRlJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwVHJhbnNjcmlwdCUzQSUyMCU3QnRyYW5zY3JpcHQlN0QlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjBGb3JtYXQlMjB3aXRoJTIwY2xlYXIlMjBzZWN0aW9ucyUzQSUwQSUyMCUyMCUyMCUyMCUyMyUyMyUyMFN1bW1hcnklMEElMjAlMjAlMjAlMjAlMjMlMjMlMjBBY3Rpb24lMjBJdGVtcyUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMyUyMyUyMERlY2lzaW9ucyUyME1hZGUlMEElMjAlMjAlMjAlMjAlMjIlMjIlMjIlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjByZXNwb25zZSUyMCUzRCUyMGNsaWVudC5jaGF0LmNvbXBsZXRpb25zLmNyZWF0ZSglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBtb2RlbCUzRCUyMmRlZXBzZWVrLWFpJTJGRGVlcFNlZWstUjEtMDUyOCUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMG1lc3NhZ2VzJTNEJTVCJTdCJTIycm9sZSUyMiUzQSUyMCUyMnVzZXIlMjIlMkMlMjAlMjJjb250ZW50JTIyJTNBJTIwcHJvbXB0JTdEJTVEJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbWF4X3Rva2VucyUzRDEwMDAlMEElMjAlMjAlMjAlMjApJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwcmVzcG9uc2UuY2hvaWNlcyU1QjAlNUQubWVzc2FnZS5jb250ZW50",highlighted:`<span class="hljs-keyword">def</span> <span class="hljs-title function_">generate_summary</span>(<span class="hljs-params">transcript</span>):
    <span class="hljs-string">&quot;&quot;&quot;Generate summary using an Inference Provider&quot;&quot;&quot;</span>
    client = InferenceClient(provider=<span class="hljs-string">&quot;auto&quot;</span>)
    
    prompt = <span class="hljs-string">f&quot;&quot;&quot;
    Analyze this meeting transcript and provide:
    1. A concise summary of key points
    2. Action items with responsible parties
    3. Important decisions made
    
    Transcript: <span class="hljs-subst">{transcript}</span>
    
    Format with clear sections:
    ## Summary
    ## Action Items  
    ## Decisions Made
    &quot;&quot;&quot;</span>
    
    response = client.chat.completions.create(
        model=<span class="hljs-string">&quot;deepseek-ai/DeepSeek-R1-0528&quot;</span>,
        messages=[{<span class="hljs-string">&quot;role&quot;</span>: <span class="hljs-string">&quot;user&quot;</span>, <span class="hljs-string">&quot;content&quot;</span>: prompt}],
        max_tokens=<span class="hljs-number">1000</span>
    )
    
    <span class="hljs-keyword">return</span> response.choices[<span class="hljs-number">0</span>].message.content`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=y,e=U(),m(t.$$.fragment)},l(n){l=h(n,"P",{"data-svelte-h":!0}),B(l)!=="svelte-1hw4xen"&&(l.innerHTML=y),e=o(n),d(t.$$.fragment,n)},m(n,c){j(n,l,c),j(n,e,c),A(t,n,c),s=!0},p:x,i(n){s||(g(t.$$.fragment,n),s=!0)},o(n){f(t.$$.fragment,n),s=!1},d(n){n&&(p(l),p(e)),b(t,n)}}}function Os(Z){let l,y=`Next, we’ll use a powerful language model like <code>deepseek-ai/DeepSeek-R1-0528</code> from DeepSeek via an Inference Provider, and just like in the previous step, we’ll use the <code>auto</code> provider to automatically select the first available provider for the model.
We will define a custom prompt to ensure the output is formatted as a summary with action items and decisions made:`,e,t,s;return t=new X({props:{code:"YXN5bmMlMjBmdW5jdGlvbiUyMHN1bW1hcml6ZSh0cmFuc2NyaXB0KSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwY2xpZW50JTIwJTNEJTIwbmV3JTIwSW5mZXJlbmNlQ2xpZW50KEhGX1RPS0VOKSUzQiUwQSUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwcHJvbXB0JTIwJTNEJTIwJTYwQW5hbHl6ZSUyMHRoaXMlMjBtZWV0aW5nJTIwdHJhbnNjcmlwdCUyMGFuZCUyMHByb3ZpZGUlM0ElMEElMjAlMjAlMjAlMjAxLiUyMEElMjBjb25jaXNlJTIwc3VtbWFyeSUyMG9mJTIwa2V5JTIwcG9pbnRzJTBBJTIwJTIwJTIwJTIwMi4lMjBBY3Rpb24lMjBpdGVtcyUyMHdpdGglMjByZXNwb25zaWJsZSUyMHBhcnRpZXMlMEElMjAlMjAlMjAlMjAzLiUyMEltcG9ydGFudCUyMGRlY2lzaW9ucyUyMG1hZGUlMEElMEElMjAlMjAlMjAlMjBUcmFuc2NyaXB0JTNBJTIwJTI0JTdCdHJhbnNjcmlwdCU3RCUwQSUwQSUyMCUyMCUyMCUyMEZvcm1hdCUyMHdpdGglMjBjbGVhciUyMHNlY3Rpb25zJTNBJTBBJTIwJTIwJTIwJTIwJTIzJTIzJTIwU3VtbWFyeSUwQSUyMCUyMCUyMCUyMCUyMyUyMyUyMEFjdGlvbiUyMEl0ZW1zJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIzJTIzJTIwRGVjaXNpb25zJTIwTWFkZSU2MCUzQiUwQSUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwcmVzcG9uc2UlMjAlM0QlMjBhd2FpdCUyMGNsaWVudC5jaGF0Q29tcGxldGlvbiglN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBtb2RlbCUzQSUyMCUyMmRlZXBzZWVrLWFpJTJGRGVlcFNlZWstUjEtMDUyOCUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMG1lc3NhZ2VzJTNBJTIwJTVCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcm9sZSUzQSUyMCUyMnVzZXIlMjIlMkMlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjb250ZW50JTNBJTIwcHJvbXB0JTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTVEJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbWF4X3Rva2VucyUzQSUyMDEwMDAlMEElMjAlMjAlMjAlMjAlN0QlMkMlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBwcm92aWRlciUzQSUyMCUyMmF1dG8lMjIlMEElMjAlMjAlMjAlMjAlN0QpJTNCJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwcmVzcG9uc2UuY2hvaWNlcyUzRi4lNUIwJTVEJTNGLm1lc3NhZ2UlM0YuY29udGVudCUyMCU3QyU3QyUyMHJlc3BvbnNlJTIwJTdDJTdDJTIwJ05vJTIwc3VtbWFyeSUyMGF2YWlsYWJsZSclM0IlMEElN0Q=",highlighted:`<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">summarize</span>(<span class="hljs-params">transcript</span>) {
    <span class="hljs-keyword">const</span> client = <span class="hljs-keyword">new</span> <span class="hljs-title class_">InferenceClient</span>(<span class="hljs-variable constant_">HF_TOKEN</span>);

    <span class="hljs-keyword">const</span> prompt = <span class="hljs-string">\`Analyze this meeting transcript and provide:
    1. A concise summary of key points
    2. Action items with responsible parties
    3. Important decisions made

    Transcript: <span class="hljs-subst">\${transcript}</span>

    Format with clear sections:
    ## Summary
    ## Action Items  
    ## Decisions Made\`</span>;

    <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">chatCompletion</span>({
        <span class="hljs-attr">model</span>: <span class="hljs-string">&quot;deepseek-ai/DeepSeek-R1-0528&quot;</span>,
        <span class="hljs-attr">messages</span>: [
            {
                <span class="hljs-attr">role</span>: <span class="hljs-string">&quot;user&quot;</span>, 
                <span class="hljs-attr">content</span>: prompt
            }
        ],
        <span class="hljs-attr">max_tokens</span>: <span class="hljs-number">1000</span>
    }, {
        <span class="hljs-attr">provider</span>: <span class="hljs-string">&quot;auto&quot;</span>
    });
    
    <span class="hljs-keyword">return</span> response.<span class="hljs-property">choices</span>?.[<span class="hljs-number">0</span>]?.<span class="hljs-property">message</span>?.<span class="hljs-property">content</span> || response || <span class="hljs-string">&#x27;No summary available&#x27;</span>;
}`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=y,e=U(),m(t.$$.fragment)},l(n){l=h(n,"P",{"data-svelte-h":!0}),B(l)!=="svelte-1hw4xen"&&(l.innerHTML=y),e=o(n),d(t.$$.fragment,n)},m(n,c){j(n,l,c),j(n,e,c),A(t,n,c),s=!0},p:x,i(n){s||(g(t.$$.fragment,n),s=!0)},o(n){f(t.$$.fragment,n),s=!1},d(n){n&&(p(l),p(e)),b(t,n)}}}function Ps(Z){let l,y,e,t;return l=new _({props:{id:"summarization",option:"python",$$slots:{default:[Ks]},$$scope:{ctx:Z}}}),e=new _({props:{id:"summarization",option:"javascript",$$slots:{default:[Os]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),y=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),y=o(s),d(e.$$.fragment,s)},m(s,n){A(l,s,n),j(s,y,n),A(e,s,n),t=!0},p(s,n){const c={};n&2&&(c.$$scope={dirty:n,ctx:s}),l.$set(c);const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),e.$set(i)},i(s){t||(g(l.$$.fragment,s),g(e.$$.fragment,s),t=!0)},o(s){f(l.$$.fragment,s),f(e.$$.fragment,s),t=!1},d(s){s&&p(y),b(l,s),b(e,s)}}}function sl(Z){let l,y="To deploy, we’ll need to create an <code>app.py</code> file and upload it to Hugging Face Spaces.",e,t,s,n="<strong>📋 Click to view the complete app.py file</strong>",c,i,M,T,C="Our app will run on port 7860 and look like this:",N,W,S='<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/inference-providers-guides/gradio-app.png" alt="Gradio app"/>',$,E,w="To deploy, we’ll need to create a new Space and upload our files.",G,Q,z='<li><strong>Create a new Space</strong>: Go to <a href="https://huggingface.co/new-space" rel="nofollow">huggingface.co/new-space</a></li> <li><strong>Choose Gradio SDK</strong> and make it public</li> <li><strong>Upload your files</strong>: Upload <code>app.py</code></li> <li><strong>Add your token</strong>: In Space settings, add <code>HF_TOKEN</code> as a secret (get it from <a href="https://huggingface.co/settings/tokens" rel="nofollow">your settings</a>)</li> <li><strong>Launch</strong>: Your app will be live at <code>https://huggingface.co/spaces/your-username/your-space-name</code></li>',Y,v,R="<p><strong>Note</strong>: While we used CLI authentication locally, Spaces requires the token as a secret for the deployment environment.</p>",k;return i=new X({props:{code:" ",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> InferenceClient


<span class="hljs-keyword">def</span> <span class="hljs-title function_">transcribe_audio</span>(<span class="hljs-params">audio_file_path</span>):
    <span class="hljs-string">&quot;&quot;&quot;Transcribe audio using an Inference Provider&quot;&quot;&quot;</span>
    client = InferenceClient(provider=<span class="hljs-string">&quot;auto&quot;</span>)

    <span class="hljs-comment"># Pass the file path directly - the client handles file reading</span>
    transcript = client.automatic_speech_recognition(
        audio=audio_file_path, model=<span class="hljs-string">&quot;openai/whisper-large-v3&quot;</span>
    )

    <span class="hljs-keyword">return</span> transcript.text


<span class="hljs-keyword">def</span> <span class="hljs-title function_">generate_summary</span>(<span class="hljs-params">transcript</span>):
    <span class="hljs-string">&quot;&quot;&quot;Generate summary using an Inference Provider&quot;&quot;&quot;</span>
    client = InferenceClient(provider=<span class="hljs-string">&quot;auto&quot;</span>)

    prompt = <span class="hljs-string">f&quot;&quot;&quot;
    Analyze this meeting transcript and provide:
    1. A concise summary of key points
    2. Action items with responsible parties
    3. Important decisions made
    
    Transcript: <span class="hljs-subst">{transcript}</span>
    
    Format with clear sections:
    ## Summary
    ## Action Items  
    ## Decisions Made
    &quot;&quot;&quot;</span>

    response = client.chat.completions.create(
        model=<span class="hljs-string">&quot;deepseek-ai/DeepSeek-R1-0528&quot;</span>,
        messages=[{<span class="hljs-string">&quot;role&quot;</span>: <span class="hljs-string">&quot;user&quot;</span>, <span class="hljs-string">&quot;content&quot;</span>: prompt}],
        max_tokens=<span class="hljs-number">1000</span>,
    )

    <span class="hljs-keyword">return</span> response.choices[<span class="hljs-number">0</span>].message.content


<span class="hljs-keyword">def</span> <span class="hljs-title function_">process_meeting_audio</span>(<span class="hljs-params">audio_file</span>):
    <span class="hljs-string">&quot;&quot;&quot;Main processing function&quot;&quot;&quot;</span>
    <span class="hljs-keyword">if</span> audio_file <span class="hljs-keyword">is</span> <span class="hljs-literal">None</span>:
        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Please upload an audio file.&quot;</span>, <span class="hljs-string">&quot;&quot;</span>

    <span class="hljs-keyword">try</span>:
        <span class="hljs-comment"># Step 1: Transcribe</span>
        transcript = transcribe_audio(audio_file)

        <span class="hljs-comment"># Step 2: Summarize</span>
        summary = generate_summary(transcript)

        <span class="hljs-keyword">return</span> transcript, summary

    <span class="hljs-keyword">except</span> Exception <span class="hljs-keyword">as</span> e:
        <span class="hljs-keyword">return</span> <span class="hljs-string">f&quot;Error processing audio: <span class="hljs-subst">{<span class="hljs-built_in">str</span>(e)}</span>&quot;</span>, <span class="hljs-string">&quot;&quot;</span>


<span class="hljs-comment"># Create Gradio interface</span>
app = gr.Interface(
    fn=process_meeting_audio,
    inputs=gr.Audio(label=<span class="hljs-string">&quot;Upload Meeting Audio&quot;</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>),
    outputs=[
        gr.Textbox(label=<span class="hljs-string">&quot;Transcript&quot;</span>, lines=<span class="hljs-number">10</span>),
        gr.Textbox(label=<span class="hljs-string">&quot;Summary &amp; Action Items&quot;</span>, lines=<span class="hljs-number">8</span>),
    ],
    title=<span class="hljs-string">&quot;🎤 AI Meeting Notes&quot;</span>,
    description=<span class="hljs-string">&quot;Upload audio to get instant transcripts and summaries.&quot;</span>,
)

<span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">&quot;__main__&quot;</span>:
    app.launch()`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=y,e=U(),t=u("details"),s=u("summary"),s.innerHTML=n,c=U(),m(i.$$.fragment),M=U(),T=u("p"),T.textContent=C,N=U(),W=u("p"),W.innerHTML=S,$=U(),E=u("p"),E.textContent=w,G=U(),Q=u("ol"),Q.innerHTML=z,Y=U(),v=u("blockquote"),v.innerHTML=R},l(J){l=h(J,"P",{"data-svelte-h":!0}),B(l)!=="svelte-falld9"&&(l.innerHTML=y),e=o(J),t=h(J,"DETAILS",{});var I=ds(t);s=h(I,"SUMMARY",{"data-svelte-h":!0}),B(s)!=="svelte-18nprsf"&&(s.innerHTML=n),c=o(I),d(i.$$.fragment,I),M=o(I),T=h(I,"P",{"data-svelte-h":!0}),B(T)!=="svelte-1n5m4re"&&(T.textContent=C),N=o(I),W=h(I,"P",{"data-svelte-h":!0}),B(W)!=="svelte-ibsop9"&&(W.innerHTML=S),I.forEach(p),$=o(J),E=h(J,"P",{"data-svelte-h":!0}),B(E)!=="svelte-13uvzr6"&&(E.textContent=w),G=o(J),Q=h(J,"OL",{"data-svelte-h":!0}),B(Q)!=="svelte-1yvydwn"&&(Q.innerHTML=z),Y=o(J),v=h(J,"BLOCKQUOTE",{"data-svelte-h":!0}),B(v)!=="svelte-1gqrdse"&&(v.innerHTML=R)},m(J,I){j(J,l,I),j(J,e,I),j(J,t,I),V(t,s),V(t,c),A(i,t,null),V(t,M),V(t,T),V(t,N),V(t,W),j(J,$,I),j(J,E,I),j(J,G,I),j(J,Q,I),j(J,Y,I),j(J,v,I),k=!0},p:x,i(J){k||(g(i.$$.fragment,J),k=!0)},o(J){f(i.$$.fragment,J),k=!1},d(J){J&&(p(l),p(e),p(t),p($),p(E),p(G),p(Q),p(Y),p(v)),b(i)}}}function ll(Z){let l,y="For JavaScript deployment, create a simple static HTML file:",e,t,s,n="<strong>📋 Click to view the complete index.html file</strong>",c,i,M,T,C="We can run our app locally by going to the file from our browser.",N,W,S='<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/inference-providers-guides/js-app.png" alt="Local app"/>',$,E,w="To deploy:",G,Q,z='<li><strong>Create a new Space</strong>: Go to <a href="https://huggingface.co/new-space" rel="nofollow">huggingface.co/new-space</a></li> <li><strong>Choose Static SDK</strong> and make it public</li> <li><strong>Upload your file</strong>: Upload <code>index.html</code></li> <li><strong>Add your token as a secret</strong>: In Space settings, add <code>HF_TOKEN</code> as a <strong>Secret</strong></li> <li><strong>Launch</strong>: Your app will be live at <code>https://huggingface.co/spaces/your-username/your-space-name</code></li>',Y,v,R="<p><strong>Note</strong>: The token is securely managed by Hugging Face Spaces and accessed via <code>window.huggingface.variables.HF_TOKEN</code>.</p>",k;return i=new X({props:{code:" ",highlighted:`<span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>🎤 AI Meeting Notes<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
        <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">font-family</span>: system-ui; <span class="hljs-attribute">max-width</span>: <span class="hljs-number">600px</span>; <span class="hljs-attribute">margin</span>: <span class="hljs-number">50px</span> auto; <span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>; }
        <span class="hljs-selector-class">.upload</span> { <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> dashed <span class="hljs-number">#ccc</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span>; <span class="hljs-attribute">cursor</span>: pointer; }
        <span class="hljs-selector-class">.upload</span><span class="hljs-selector-pseudo">:hover</span> { <span class="hljs-attribute">border-color</span>: <span class="hljs-number">#007bff</span>; }
        <span class="hljs-selector-tag">button</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#007bff</span>; <span class="hljs-attribute">color</span>: white; <span class="hljs-attribute">border</span>: none; <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">20px</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; <span class="hljs-attribute">cursor</span>: pointer; }
        <span class="hljs-selector-class">.loading</span> { <span class="hljs-attribute">display</span>: none; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span>; }
        <span class="hljs-selector-class">.results</span> { <span class="hljs-attribute">display</span>: none; <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">20px</span>; }
        <span class="hljs-selector-class">.result</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#f5f5f5</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span>; <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; }
        <span class="hljs-selector-class">.error</span> { <span class="hljs-attribute">color</span>: red; <span class="hljs-attribute">background</span>: <span class="hljs-number">#ffe6e6</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; <span class="hljs-attribute">display</span>: none; }
        <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=<span class="hljs-string">&quot;file&quot;</span>]</span> { <span class="hljs-attribute">display</span>: none; }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>🎤 AI Meeting Notes<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
       
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;upload&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;document.getElementById(&#x27;file&#x27;).click()&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;audio/*&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Upload audio file<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>Choose File<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;loading&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;loading&quot;</span>&gt;</span>Processing...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;error&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;error&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;results&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;result&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>📝 Transcript<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;transcript&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;result&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>📋 Summary<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;summary&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript">
        <span class="hljs-keyword">import</span> { <span class="hljs-title class_">InferenceClient</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://esm.sh/@huggingface/inference&#x27;</span>;
        
        <span class="hljs-comment">// Access the token from Hugging Face Spaces secrets</span>
        <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">HF_TOKEN</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">huggingface</span>?.<span class="hljs-property">variables</span>?.<span class="hljs-property">HF_TOKEN</span>;
        
        <span class="hljs-comment">// Add error handling for missing token</span>
        <span class="hljs-keyword">if</span> (!<span class="hljs-variable constant_">HF_TOKEN</span>) {
            <span class="hljs-title function_">showError</span>(<span class="hljs-string">&#x27;HF_TOKEN not configured. Please add it in Space settings.&#x27;</span>);
            <span class="hljs-keyword">return</span>;
        }
        
        <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;file&#x27;</span>).<span class="hljs-property">onchange</span> = <span class="hljs-keyword">async</span> (e) =&gt; {
            <span class="hljs-keyword">if</span> (!e.<span class="hljs-property">target</span>.<span class="hljs-property">files</span>[<span class="hljs-number">0</span>]) <span class="hljs-keyword">return</span>;
            
            <span class="hljs-keyword">const</span> file = e.<span class="hljs-property">target</span>.<span class="hljs-property">files</span>[<span class="hljs-number">0</span>];
            
            <span class="hljs-title function_">show</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;loading&#x27;</span>));
            <span class="hljs-title function_">hide</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;results&#x27;</span>), <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;error&#x27;</span>));
            
            <span class="hljs-keyword">try</span> {
                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;🎤 Starting transcription...&#x27;</span>);
                <span class="hljs-keyword">const</span> transcript = <span class="hljs-keyword">await</span> <span class="hljs-title function_">transcribe</span>(file);
                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;✅ Transcription completed:&#x27;</span>, transcript.<span class="hljs-title function_">substring</span>(<span class="hljs-number">0</span>, <span class="hljs-number">100</span>) + <span class="hljs-string">&#x27;...&#x27;</span>);
                
                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;🖊️ Starting summarization...&#x27;</span>);
                <span class="hljs-keyword">const</span> summary = <span class="hljs-keyword">await</span> <span class="hljs-title function_">summarize</span>(transcript);
                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;✅ Summary completed:&#x27;</span>, summary.<span class="hljs-title function_">substring</span>(<span class="hljs-number">0</span>, <span class="hljs-number">100</span>) + <span class="hljs-string">&#x27;...&#x27;</span>);
                
                <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;transcript&#x27;</span>).<span class="hljs-property">textContent</span> = transcript;
                <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;summary&#x27;</span>).<span class="hljs-property">textContent</span> = summary;
                
                <span class="hljs-title function_">hide</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;loading&#x27;</span>));
                <span class="hljs-title function_">show</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;results&#x27;</span>));
            } <span class="hljs-keyword">catch</span> (error) {
                <span class="hljs-title function_">hide</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;loading&#x27;</span>));
                <span class="hljs-title function_">showError</span>(<span class="hljs-string">\`Error: <span class="hljs-subst">\${error.message}</span>\`</span>);
            }
        };
        
        <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">transcribe</span>(<span class="hljs-params">file</span>) {
            <span class="hljs-keyword">const</span> client = <span class="hljs-keyword">new</span> <span class="hljs-title class_">InferenceClient</span>(<span class="hljs-variable constant_">HF_TOKEN</span>);

            <span class="hljs-keyword">const</span> output = <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">automaticSpeechRecognition</span>({
                <span class="hljs-attr">data</span>: file,
                <span class="hljs-attr">model</span>: <span class="hljs-string">&quot;openai/whisper-large-v3-turbo&quot;</span>,
                <span class="hljs-attr">provider</span>: <span class="hljs-string">&quot;auto&quot;</span>
            });
            
            <span class="hljs-keyword">return</span> output.<span class="hljs-property">text</span> || output || <span class="hljs-string">&#x27;Transcription completed&#x27;</span>;
        }
        
        <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">summarize</span>(<span class="hljs-params">transcript</span>) {
            <span class="hljs-keyword">const</span> client = <span class="hljs-keyword">new</span> <span class="hljs-title class_">InferenceClient</span>(<span class="hljs-variable constant_">HF_TOKEN</span>);

            <span class="hljs-keyword">const</span> prompt = <span class="hljs-string">\`Analyze this meeting transcript and provide:
            1. A concise summary of key points
            2. Action items with responsible parties
            3. Important decisions made

            Transcript: <span class="hljs-subst">\${transcript}</span>

            Format with clear sections:
            ## Summary
            ## Action Items  
            ## Decisions Made\`</span>;

            <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">chatCompletion</span>({
                <span class="hljs-attr">model</span>: <span class="hljs-string">&quot;deepseek-ai/DeepSeek-R1-0528&quot;</span>,
                <span class="hljs-attr">messages</span>: [
                    {
                        <span class="hljs-attr">role</span>: <span class="hljs-string">&quot;user&quot;</span>, 
                        <span class="hljs-attr">content</span>: prompt
                    }
                ],
                <span class="hljs-attr">max_tokens</span>: <span class="hljs-number">1000</span>
            }, {
                <span class="hljs-attr">provider</span>: <span class="hljs-string">&quot;auto&quot;</span>
            });
            
            <span class="hljs-keyword">return</span> response.<span class="hljs-property">choices</span>?.[<span class="hljs-number">0</span>]?.<span class="hljs-property">message</span>?.<span class="hljs-property">content</span> || response || <span class="hljs-string">&#x27;No summary available&#x27;</span>;
        }
        
        <span class="hljs-keyword">const</span> <span class="hljs-title function_">show</span> = el =&gt; el.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">&#x27;block&#x27;</span>;
        <span class="hljs-keyword">const</span> <span class="hljs-title function_">hide</span> = (<span class="hljs-params">...els</span>) =&gt; els.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">el</span> =&gt;</span> el.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">&#x27;none&#x27;</span>);
        <span class="hljs-keyword">const</span> <span class="hljs-title function_">showError</span> = msg =&gt; {
            <span class="hljs-keyword">const</span> error = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;error&#x27;</span>);
            error.<span class="hljs-property">innerHTML</span> = msg;
            <span class="hljs-title function_">show</span>(error);
        };
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>`,wrap:!1}}),{c(){l=u("p"),l.textContent=y,e=U(),t=u("details"),s=u("summary"),s.innerHTML=n,c=U(),m(i.$$.fragment),M=U(),T=u("p"),T.textContent=C,N=U(),W=u("p"),W.innerHTML=S,$=U(),E=u("p"),E.textContent=w,G=U(),Q=u("ol"),Q.innerHTML=z,Y=U(),v=u("blockquote"),v.innerHTML=R},l(J){l=h(J,"P",{"data-svelte-h":!0}),B(l)!=="svelte-msmbet"&&(l.textContent=y),e=o(J),t=h(J,"DETAILS",{});var I=ds(t);s=h(I,"SUMMARY",{"data-svelte-h":!0}),B(s)!=="svelte-4npc9i"&&(s.innerHTML=n),c=o(I),d(i.$$.fragment,I),M=o(I),T=h(I,"P",{"data-svelte-h":!0}),B(T)!=="svelte-1thvetd"&&(T.textContent=C),N=o(I),W=h(I,"P",{"data-svelte-h":!0}),B(W)!=="svelte-16bn4n3"&&(W.innerHTML=S),I.forEach(p),$=o(J),E=h(J,"P",{"data-svelte-h":!0}),B(E)!=="svelte-8ht9li"&&(E.textContent=w),G=o(J),Q=h(J,"OL",{"data-svelte-h":!0}),B(Q)!=="svelte-8vwz1w"&&(Q.innerHTML=z),Y=o(J),v=h(J,"BLOCKQUOTE",{"data-svelte-h":!0}),B(v)!=="svelte-1a0q7y9"&&(v.innerHTML=R)},m(J,I){j(J,l,I),j(J,e,I),j(J,t,I),V(t,s),V(t,c),A(i,t,null),V(t,M),V(t,T),V(t,N),V(t,W),j(J,$,I),j(J,E,I),j(J,G,I),j(J,Q,I),j(J,Y,I),j(J,v,I),k=!0},p:x,i(J){k||(g(i.$$.fragment,J),k=!0)},o(J){f(i.$$.fragment,J),k=!1},d(J){J&&(p(l),p(e),p(t),p($),p(E),p(G),p(Q),p(Y),p(v)),b(i)}}}function al(Z){let l,y,e,t;return l=new _({props:{id:"deployment",option:"python",$$slots:{default:[sl]},$$scope:{ctx:Z}}}),e=new _({props:{id:"deployment",option:"javascript",$$slots:{default:[ll]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),y=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),y=o(s),d(e.$$.fragment,s)},m(s,n){A(l,s,n),j(s,y,n),A(e,s,n),t=!0},p(s,n){const c={};n&2&&(c.$$scope={dirty:n,ctx:s}),l.$set(c);const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),e.$set(i)},i(s){t||(g(l.$$.fragment,s),g(e.$$.fragment,s),t=!0)},o(s){f(l.$$.fragment,s),f(e.$$.fragment,s),t=!1},d(s){s&&p(y),b(l,s),b(e,s)}}}function nl(Z){let l,y,e,t,s,n,c,i,M,T="You’ve learned the basics and understand the provider ecosystem. Now let’s build something practical: an <strong>AI Meeting Notes</strong> app that transcribes audio files and generates summaries with action items.",C,N,W="This project demonstrates real-world AI orchestration using multiple specialized providers within a single application.",S,$,E,w,G="Our app will:",Q,z,Y="<li><strong>Accept audio</strong> as a microphone input through a web interface</li> <li><strong>Transcribe speech</strong> using a fast speech-to-text model</li> <li><strong>Generate summaries</strong> using a powerful language model</li> <li><strong>Deploy to the web</strong> for easy sharing</li>",v,R,k,J,I,H,cs,O,is,F,ys,P,rs,q,Us,ss,os,L,Js,ls,Ts,D,ws,as,us,ns,As='Congratulations! You’ve created a production-ready AI application that: handles real-world tasks, provides a professional interface, scales automatically, and costs efficiently. If you want to explore more providers, you can check out the <a href="https://huggingface.co/inference-providers" rel="nofollow">Inference Providers</a> page. Or here are some ideas for next steps:',hs,ts,gs="<li><strong>Improve your prompt</strong>: Try different prompts to improve the quality for your use case</li> <li><strong>Try different models</strong>: Experiment with various speech and text models</li> <li><strong>Compare performance</strong>: Benchmark speed vs. accuracy across providers</li>",Is,es,Cs,ps,ms;return s=new Ss({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),c=new K({props:{title:"Building Your First AI App with Inference Providers",local:"building-your-first-ai-app-with-inference-providers",headingTag:"h1"}}),$=new K({props:{title:"Project Overview",local:"project-overview",headingTag:"h2"}}),R=new Ms({props:{id:"tech-stack",options:["python","javascript"],$$slots:{default:[Vs]},$$scope:{ctx:Z}}}),J=new K({props:{title:"Step 1: Set Up Authentication",local:"step-1-set-up-authentication",headingTag:"h2"}}),H=new Ms({props:{id:"auth",options:["python","javascript"],$$slots:{default:[_s]},$$scope:{ctx:Z}}}),O=new K({props:{title:"Step 2: Build the User Interface",local:"step-2-build-the-user-interface",headingTag:"h2"}}),F=new Ms({props:{id:"ui",options:["python","javascript"],$$slots:{default:[Fs]},$$scope:{ctx:Z}}}),P=new K({props:{title:"Step 3: Add Speech Transcription",local:"step-3-add-speech-transcription",headingTag:"h2"}}),q=new Ms({props:{id:"transcription",options:["python","javascript"],$$slots:{default:[Ds]},$$scope:{ctx:Z}}}),ss=new K({props:{title:"Step 4: Add AI Summarization",local:"step-4-add-ai-summarization",headingTag:"h2"}}),L=new Ms({props:{id:"summarization",options:["python","javascript"],$$slots:{default:[Ps]},$$scope:{ctx:Z}}}),ls=new K({props:{title:"Step 5: Deploy on Hugging Face Spaces",local:"step-5-deploy-on-hugging-face-spaces",headingTag:"h2"}}),D=new Ms({props:{id:"deployment",options:["python","javascript"],$$slots:{default:[al]},$$scope:{ctx:Z}}}),as=new K({props:{title:"Next Steps",local:"next-steps",headingTag:"h2"}}),es=new Rs({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/inference-providers/guides/building-first-app.md"}}),{c(){l=u("meta"),y=U(),e=u("p"),t=U(),m(s.$$.fragment),n=U(),m(c.$$.fragment),i=U(),M=u("p"),M.innerHTML=T,C=U(),N=u("p"),N.textContent=W,S=U(),m($.$$.fragment),E=U(),w=u("p"),w.textContent=G,Q=U(),z=u("ol"),z.innerHTML=Y,v=U(),m(R.$$.fragment),k=U(),m(J.$$.fragment),I=U(),m(H.$$.fragment),cs=U(),m(O.$$.fragment),is=U(),m(F.$$.fragment),ys=U(),m(P.$$.fragment),rs=U(),m(q.$$.fragment),Us=U(),m(ss.$$.fragment),os=U(),m(L.$$.fragment),Js=U(),m(ls.$$.fragment),Ts=U(),m(D.$$.fragment),ws=U(),m(as.$$.fragment),us=U(),ns=u("p"),ns.innerHTML=As,hs=U(),ts=u("ul"),ts.innerHTML=gs,Is=U(),m(es.$$.fragment),Cs=U(),ps=u("p"),this.h()},l(a){const r=vs("svelte-u9bgzb",document.head);l=h(r,"META",{name:!0,content:!0}),r.forEach(p),y=o(a),e=h(a,"P",{}),ds(e).forEach(p),t=o(a),d(s.$$.fragment,a),n=o(a),d(c.$$.fragment,a),i=o(a),M=h(a,"P",{"data-svelte-h":!0}),B(M)!=="svelte-1xvjfqn"&&(M.innerHTML=T),C=o(a),N=h(a,"P",{"data-svelte-h":!0}),B(N)!=="svelte-gz55cx"&&(N.textContent=W),S=o(a),d($.$$.fragment,a),E=o(a),w=h(a,"P",{"data-svelte-h":!0}),B(w)!=="svelte-5khb3j"&&(w.textContent=G),Q=o(a),z=h(a,"OL",{"data-svelte-h":!0}),B(z)!=="svelte-8ofcwq"&&(z.innerHTML=Y),v=o(a),d(R.$$.fragment,a),k=o(a),d(J.$$.fragment,a),I=o(a),d(H.$$.fragment,a),cs=o(a),d(O.$$.fragment,a),is=o(a),d(F.$$.fragment,a),ys=o(a),d(P.$$.fragment,a),rs=o(a),d(q.$$.fragment,a),Us=o(a),d(ss.$$.fragment,a),os=o(a),d(L.$$.fragment,a),Js=o(a),d(ls.$$.fragment,a),Ts=o(a),d(D.$$.fragment,a),ws=o(a),d(as.$$.fragment,a),us=o(a),ns=h(a,"P",{"data-svelte-h":!0}),B(ns)!=="svelte-cyuk9m"&&(ns.innerHTML=As),hs=o(a),ts=h(a,"UL",{"data-svelte-h":!0}),B(ts)!=="svelte-i47df0"&&(ts.innerHTML=gs),Is=o(a),d(es.$$.fragment,a),Cs=o(a),ps=h(a,"P",{}),ds(ps).forEach(p),this.h()},h(){js(l,"name","hf:doc:metadata"),js(l,"content",tl)},m(a,r){V(document.head,l),j(a,y,r),j(a,e,r),j(a,t,r),A(s,a,r),j(a,n,r),A(c,a,r),j(a,i,r),j(a,M,r),j(a,C,r),j(a,N,r),j(a,S,r),A($,a,r),j(a,E,r),j(a,w,r),j(a,Q,r),j(a,z,r),j(a,v,r),A(R,a,r),j(a,k,r),A(J,a,r),j(a,I,r),A(H,a,r),j(a,cs,r),A(O,a,r),j(a,is,r),A(F,a,r),j(a,ys,r),A(P,a,r),j(a,rs,r),A(q,a,r),j(a,Us,r),A(ss,a,r),j(a,os,r),A(L,a,r),j(a,Js,r),A(ls,a,r),j(a,Ts,r),A(D,a,r),j(a,ws,r),A(as,a,r),j(a,us,r),j(a,ns,r),j(a,hs,r),j(a,ts,r),j(a,Is,r),A(es,a,r),j(a,Cs,r),j(a,ps,r),ms=!0},p(a,[r]){const fs={};r&2&&(fs.$$scope={dirty:r,ctx:a}),R.$set(fs);const bs={};r&2&&(bs.$$scope={dirty:r,ctx:a}),H.$set(bs);const Bs={};r&2&&(Bs.$$scope={dirty:r,ctx:a}),F.$set(Bs);const Zs={};r&2&&(Zs.$$scope={dirty:r,ctx:a}),q.$set(Zs);const Ns={};r&2&&(Ns.$$scope={dirty:r,ctx:a}),L.$set(Ns);const Es={};r&2&&(Es.$$scope={dirty:r,ctx:a}),D.$set(Es)},i(a){ms||(g(s.$$.fragment,a),g(c.$$.fragment,a),g($.$$.fragment,a),g(R.$$.fragment,a),g(J.$$.fragment,a),g(H.$$.fragment,a),g(O.$$.fragment,a),g(F.$$.fragment,a),g(P.$$.fragment,a),g(q.$$.fragment,a),g(ss.$$.fragment,a),g(L.$$.fragment,a),g(ls.$$.fragment,a),g(D.$$.fragment,a),g(as.$$.fragment,a),g(es.$$.fragment,a),ms=!0)},o(a){f(s.$$.fragment,a),f(c.$$.fragment,a),f($.$$.fragment,a),f(R.$$.fragment,a),f(J.$$.fragment,a),f(H.$$.fragment,a),f(O.$$.fragment,a),f(F.$$.fragment,a),f(P.$$.fragment,a),f(q.$$.fragment,a),f(ss.$$.fragment,a),f(L.$$.fragment,a),f(ls.$$.fragment,a),f(D.$$.fragment,a),f(as.$$.fragment,a),f(es.$$.fragment,a),ms=!1},d(a){a&&(p(y),p(e),p(t),p(n),p(i),p(M),p(C),p(N),p(S),p(E),p(w),p(Q),p(z),p(v),p(k),p(I),p(cs),p(is),p(ys),p(rs),p(Us),p(os),p(Js),p(Ts),p(ws),p(us),p(ns),p(hs),p(ts),p(Is),p(Cs),p(ps)),p(l),b(s,a),b(c,a),b($,a),b(R,a),b(J,a),b(H,a),b(O,a),b(F,a),b(P,a),b(q,a),b(ss,a),b(L,a),b(ls,a),b(D,a),b(as,a),b(es,a)}}}const tl='{"title":"Building Your First AI App with Inference Providers","local":"building-your-first-ai-app-with-inference-providers","sections":[{"title":"Project Overview","local":"project-overview","sections":[],"depth":2},{"title":"Step 1: Set Up Authentication","local":"step-1-set-up-authentication","sections":[],"depth":2},{"title":"Step 2: Build the User Interface","local":"step-2-build-the-user-interface","sections":[],"depth":2},{"title":"Step 3: Add Speech Transcription","local":"step-3-add-speech-transcription","sections":[],"depth":2},{"title":"Step 4: Add AI Summarization","local":"step-4-add-ai-summarization","sections":[],"depth":2},{"title":"Step 5: Deploy on Hugging Face Spaces","local":"step-5-deploy-on-hugging-face-spaces","sections":[],"depth":2},{"title":"Next Steps","local":"next-steps","sections":[],"depth":2}],"depth":1}';function el(Z){return Ws(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class rl extends $s{constructor(l){super(),Qs(this,l,el,nl,Gs,{})}}export{rl as component};
