import{s as Gs,o as Ns,n as _}from"../chunks/scheduler.ddeee2a5.js";import{S as Ws,i as $s,e as u,s as U,c as m,h as Ss,a as h,d as p,b as r,f as ds,g as d,j as B,k as cs,l as V,m as c,n as g,t as f,o as A,p as b}from"../chunks/index.10b70568.js";import{C as vs}from"../chunks/CopyLLMTxtMenu.48a5d8e9.js";import{C as X}from"../chunks/CodeBlock.7ca4c11d.js";import{H as K,E as ks}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.c3713d0b.js";import{H as Ms,a as q}from"../chunks/HfOption.1e773499.js";function Rs(Z){let l,j="<strong>Tech Stack</strong>: Gradio (for the UI) + Inference Providers (for the AI)";return{c(){l=u("p"),l.innerHTML=j},l(e){l=h(e,"P",{"data-svelte-h":!0}),B(l)!=="svelte-6re1qd"&&(l.innerHTML=j)},m(e,t){c(e,l,t)},p:_,d(e){e&&p(l)}}}function zs(Z){let l,j="<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=j,e=U(),t=u("p"),t.innerHTML=s},l(n){l=h(n,"P",{"data-svelte-h":!0}),B(l)!=="svelte-scf74u"&&(l.innerHTML=j),e=r(n),t=h(n,"P",{"data-svelte-h":!0}),B(t)!=="svelte-180edvt"&&(t.innerHTML=s)},m(n,i){c(n,l,i),c(n,e,i),c(n,t,i)},p:_,d(n){n&&(p(l),p(e),p(t))}}}function Vs(Z){let l,j,e,t;return l=new q({props:{id:"tech-stack",option:"python",$$slots:{default:[Rs]},$$scope:{ctx:Z}}}),e=new q({props:{id:"tech-stack",option:"javascript",$$slots:{default:[zs]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),j=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),j=r(s),d(e.$$.fragment,s)},m(s,n){g(l,s,n),c(s,j,n),g(e,s,n),t=!0},p(s,n){const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),l.$set(i);const y={};n&2&&(y.$$scope={dirty:n,ctx:s}),e.$set(y)},i(s){t||(f(l.$$.fragment,s),f(e.$$.fragment,s),t=!0)},o(s){A(l.$$.fragment,s),A(e.$$.fragment,s),t=!1},d(s){s&&p(j),b(l,s),b(e,s)}}}function Ys(Z){let l,j="Before we start coding, authenticate with Hugging Face using the CLI:",e,t,s,n,i='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>.',y;return t=new X({props:{code:"cGlwJTIwaW5zdGFsbCUyMGh1Z2dpbmdmYWNlX2h1YiUwQWhmJTIwYXV0aCUyMGxvZ2lu",highlighted:`pip install huggingface_hub
hf auth login`,wrap:!1}}),{c(){l=u("p"),l.textContent=j,e=U(),m(t.$$.fragment),s=U(),n=u("p"),n.innerHTML=i},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-1frpmc9"&&(l.textContent=j),e=r(M),d(t.$$.fragment,M),s=r(M),n=h(M,"P",{"data-svelte-h":!0}),B(n)!=="svelte-7amyfj"&&(n.innerHTML=i)},m(M,T){c(M,l,T),c(M,e,T),g(t,M,T),c(M,s,T),c(M,n,T),y=!0},p:_,i(M){y||(f(t.$$.fragment,M),y=!0)},o(M){A(t.$$.fragment,M),y=!1},d(M){M&&(p(l),p(e),p(s),p(n)),b(t,M)}}}function Xs(Z){let l,j='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,i,y,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=j,e=U(),m(t.$$.fragment),s=U(),m(n.$$.fragment),i=U(),y=u("blockquote"),y.innerHTML=M,this.h()},l(C){l=h(C,"P",{"data-svelte-h":!0}),B(l)!=="svelte-72y8m9"&&(l.innerHTML=j),e=r(C),d(t.$$.fragment,C),s=r(C),d(n.$$.fragment,C),i=r(C),y=h(C,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),B(y)!=="svelte-fc92om"&&(y.innerHTML=M),this.h()},h(){cs(y,"class","warning")},m(C,E){c(C,l,E),c(C,e,E),g(t,C,E),c(C,s,E),g(n,C,E),c(C,i,E),c(C,y,E),T=!0},p:_,i(C){T||(f(t.$$.fragment,C),f(n.$$.fragment,C),T=!0)},o(C){A(t.$$.fragment,C),A(n.$$.fragment,C),T=!1},d(C){C&&(p(l),p(e),p(s),p(i),p(y)),b(t,C),b(n,C)}}}function qs(Z){let l,j,e,t;return l=new q({props:{id:"auth",option:"python",$$slots:{default:[Ys]},$$scope:{ctx:Z}}}),e=new q({props:{id:"auth",option:"javascript",$$slots:{default:[Xs]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),j=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),j=r(s),d(e.$$.fragment,s)},m(s,n){g(l,s,n),c(s,j,n),g(e,s,n),t=!0},p(s,n){const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),l.$set(i);const y={};n&2&&(y.$$scope={dirty:n,ctx:s}),e.$set(y)},i(s){t||(f(l.$$.fragment,s),f(e.$$.fragment,s),t=!0)},o(s){A(l.$$.fragment,s),A(e.$$.fragment,s),t=!1},d(s){s&&p(j),b(l,s),b(e,s)}}}function _s(Z){let l,j="Now let’s create a simple web interface using Gradio:",e,t,s,n,i="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.",y;return t=new X({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQWZyb20lMjBodWdnaW5nZmFjZV9odWIlMjBpbXBvcnQlMjBJbmZlcmVuY2VDbGllbnQlMEElMEFkZWYlMjBwcm9jZXNzX21lZXRpbmdfYXVkaW8oYXVkaW9fZmlsZSklM0ElMEElMjAlMjAlMjAlMjAlMjIlMjIlMjJQcm9jZXNzJTIwdXBsb2FkZWQlMjBhdWRpbyUyMGZpbGUlMjBhbmQlMjByZXR1cm4lMjB0cmFuc2NyaXB0JTIwJTJCJTIwc3VtbWFyeSUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGlmJTIwYXVkaW9fZmlsZSUyMGlzJTIwTm9uZSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHJldHVybiUyMCUyMlBsZWFzZSUyMHVwbG9hZCUyMGFuJTIwYXVkaW8lMjBmaWxlLiUyMiUyQyUyMCUyMiUyMiUwQSUwQSUyMCUyMCUyMCUyMCUyMyUyMFdlJ2xsJTIwaW1wbGVtZW50JTIwdGhlJTIwQUklMjBsb2dpYyUyMG5leHQlMEElMjAlMjAlMjAlMjByZXR1cm4lMjAlMjJUcmFuc2NyaXB0JTIwd2lsbCUyMGFwcGVhciUyMGhlcmUuLi4lMjIlMkMlMjAlMjJTdW1tYXJ5JTIwd2lsbCUyMGFwcGVhciUyMGhlcmUuLi4lMjIlMEElMEElMjMlMjBDcmVhdGUlMjB0aGUlMjBHcmFkaW8lMjBpbnRlcmZhY2UlMEFhcHAlMjAlM0QlMjBnci5JbnRlcmZhY2UoJTBBJTIwJTIwJTIwJTIwZm4lM0Rwcm9jZXNzX21lZXRpbmdfYXVkaW8lMkMlMEElMjAlMjAlMjAlMjBpbnB1dHMlM0Rnci5BdWRpbyhsYWJlbCUzRCUyMlVwbG9hZCUyME1lZXRpbmclMjBBdWRpbyUyMiUyQyUyMHR5cGUlM0QlMjJmaWxlcGF0aCUyMiklMkMlMEElMjAlMjAlMjAlMjBvdXRwdXRzJTNEJTVCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZ3IuVGV4dGJveChsYWJlbCUzRCUyMlRyYW5zY3JpcHQlMjIlMkMlMjBsaW5lcyUzRDEwKSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGdyLlRleHRib3gobGFiZWwlM0QlMjJTdW1tYXJ5JTIwJTI2JTIwQWN0aW9uJTIwSXRlbXMlMjIlMkMlMjBsaW5lcyUzRDgpJTBBJTIwJTIwJTIwJTIwJTVEJTJDJTBBJTIwJTIwJTIwJTIwdGl0bGUlM0QlMjIlRjAlOUYlOEUlQTQlMjBBSSUyME1lZXRpbmclMjBOb3RlcyUyMiUyQyUwQSUyMCUyMCUyMCUyMGRlc2NyaXB0aW9uJTNEJTIyVXBsb2FkJTIwYW4lMjBhdWRpbyUyMGZpbGUlMjB0byUyMGdldCUyMGFuJTIwaW5zdGFudCUyMHRyYW5zY3JpcHQlMjBhbmQlMjBzdW1tYXJ5JTIwd2l0aCUyMGFjdGlvbiUyMGl0ZW1zLiUyMiUwQSklMEElMEFpZiUyMF9fbmFtZV9fJTIwJTNEJTNEJTIwJTIyX19tYWluX18lMjIlM0ElMEElMjAlMjAlMjAlMjBhcHAubGF1bmNoKCk=",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=j,e=U(),m(t.$$.fragment),s=U(),n=u("p"),n.innerHTML=i},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-agnmrx"&&(l.textContent=j),e=r(M),d(t.$$.fragment,M),s=r(M),n=h(M,"P",{"data-svelte-h":!0}),B(n)!=="svelte-mdm151"&&(n.innerHTML=i)},m(M,T){c(M,l,T),c(M,e,T),g(t,M,T),c(M,s,T),c(M,n,T),y=!0},p:_,i(M){y||(f(t.$$.fragment,M),y=!0)},o(M){A(t.$$.fragment,M),y=!1},d(M){M&&(p(l),p(e),p(s),p(n)),b(t,M)}}}function Hs(Z){let l,j="For JavaScript, we’ll create a clean HTML interface with native file upload and a simple loading state:",e,t,s,n,i="This creates a clean drag-and-drop interface with styled results sections for the transcript and summary.",y,M,T="Our application can then use the <code>InferenceClient</code> from <code>huggingface.js</code> to call the transcription and summarization functions.",C,E,N,v,W="We’ll also need to implement the <code>transcribe</code> and <code>summarize</code> functions.",Q;return t=new X({props:{code:"JTNDYm9keSUzRSUwQSUyMCUyMCUzQ2gxJTNFJUYwJTlGJThFJUE0JTIwQUklMjBNZWV0aW5nJTIwTm90ZXMlM0MlMkZoMSUzRSUwQSUwQSUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIydXBsb2FkJTIyJTIwb25jbGljayUzRCUyMmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdmaWxlJykuY2xpY2soKSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMmZpbGUlMjIlMjBpZCUzRCUyMmZpbGUlMjIlMjBhY2NlcHQlM0QlMjJhdWRpbyUyRiolMjIlMjAlMkYlM0UlMEElMjAlMjAlMjAlMjAlM0NwJTNFVXBsb2FkJTIwYXVkaW8lMjBmaWxlJTNDJTJGcCUzRSUwQSUyMCUyMCUyMCUyMCUzQ2J1dHRvbiUyMHR5cGUlM0QlMjJidXR0b24lMjIlM0VDaG9vc2UlMjBGaWxlJTNDJTJGYnV0dG9uJTNFJTBBJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTBBJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJsb2FkaW5nJTIyJTIwaWQlM0QlMjJsb2FkaW5nJTIyJTNFUHJvY2Vzc2luZy4uLiUzQyUyRmRpdiUzRSUwQSUwQSUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIycmVzdWx0cyUyMiUyMGlkJTNEJTIycmVzdWx0cyUyMiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIycmVzdWx0JTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaDMlM0UlRjAlOUYlOTMlOUQlMjBUcmFuc2NyaXB0JTNDJTJGaDMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBpZCUzRCUyMnRyYW5zY3JpcHQlMjIlM0UlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnJlc3VsdCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2gzJTNFJUYwJTlGJTkzJThCJTIwU3VtbWFyeSUzQyUyRmgzJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwaWQlM0QlMjJzdW1tYXJ5JTIyJTNFJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGYm9keSUzRQ==",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}}),E=new X({props:{code:"aW1wb3J0JTIwJTdCJTIwSW5mZXJlbmNlQ2xpZW50JTIwJTdEJTIwZnJvbSUyMCUyMmh0dHBzJTNBJTJGJTJGZXNtLnNoJTJGJTQwaHVnZ2luZ2ZhY2UlMkZpbmZlcmVuY2UlMjIlM0IlMEElMEElMkYlMkYlMjBBY2Nlc3MlMjB0aGUlMjB0b2tlbiUyMGZyb20lMjBIdWdnaW5nJTIwRmFjZSUyMFNwYWNlcyUyMHNlY3JldHMlMEFjb25zdCUyMEhGX1RPS0VOJTIwJTNEJTIwd2luZG93Lmh1Z2dpbmdmYWNlJTNGLnZhcmlhYmxlcyUzRi5IRl9UT0tFTiUzQiUwQSUyRiUyRiUyME9yJTIwaWYlMjB5b3UncmUlMjBydW5uaW5nJTIwbG9jYWxseSUyQyUyMHlvdSUyMGNhbiUyMHNldCUyMGl0JTIwYXMlMjBhbiUyMGVudmlyb25tZW50JTIwdmFyaWFibGUlMEElMkYlMkYlMjBjb25zdCUyMEhGX1RPS0VOJTIwJTNEJTIwcHJvY2Vzcy5lbnYuSEZfVE9LRU4lM0IlMEElMEFkb2N1bWVudC5nZXRFbGVtZW50QnlJZCglMjJmaWxlJTIyKS5vbmNoYW5nZSUyMCUzRCUyMGFzeW5jJTIwKGUpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwaWYlMjAoIWUudGFyZ2V0LmZpbGVzJTVCMCU1RCklMjByZXR1cm4lM0IlMEElMEElMjAlMjBjb25zdCUyMGZpbGUlMjAlM0QlMjBlLnRhcmdldC5maWxlcyU1QjAlNUQlM0IlMEElMEElMjAlMjBzaG93KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCUyMmxvYWRpbmclMjIpKSUzQiUwQSUyMCUyMGhpZGUoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJTIycmVzdWx0cyUyMiklMkMlMjBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCglMjJlcnJvciUyMikpJTNCJTBBJTBBJTIwJTIwdHJ5JTIwJTdCJTBBJTIwJTIwJTIwJTIwY29uc3QlMjB0cmFuc2NyaXB0JTIwJTNEJTIwYXdhaXQlMjB0cmFuc2NyaWJlKGZpbGUpJTNCJTBBJTIwJTIwJTIwJTIwY29uc3QlMjBzdW1tYXJ5JTIwJTNEJTIwYXdhaXQlMjBzdW1tYXJpemUodHJhbnNjcmlwdCklM0IlMEElMEElMjAlMjAlMjAlMjBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCglMjJ0cmFuc2NyaXB0JTIyKS50ZXh0Q29udGVudCUyMCUzRCUyMHRyYW5zY3JpcHQlM0IlMEElMjAlMjAlMjAlMjBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCglMjJzdW1tYXJ5JTIyKS50ZXh0Q29udGVudCUyMCUzRCUyMHN1bW1hcnklM0IlMEElMEElMjAlMjAlMjAlMjBoaWRlKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCUyMmxvYWRpbmclMjIpKSUzQiUwQSUyMCUyMCUyMCUyMHNob3coZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJTIycmVzdWx0cyUyMikpJTNCJTBBJTIwJTIwJTdEJTIwY2F0Y2glMjAoZXJyb3IpJTIwJTdCJTBBJTIwJTIwJTIwJTIwaGlkZShkb2N1bWVudC5nZXRFbGVtZW50QnlJZCglMjJsb2FkaW5nJTIyKSklM0IlMEElMjAlMjAlMjAlMjBzaG93RXJyb3IoJTYwRXJyb3IlM0ElMjAlMjQlN0JlcnJvci5tZXNzYWdlJTdEJTYwKSUzQiUwQSUyMCUyMCU3RCUwQSU3RCUzQg==",highlighted:`<span class="hljs-keyword">import</span> { <span class="hljs-title class_">InferenceClient</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;https://esm.sh/@huggingface/inference&quot;</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">&quot;file&quot;</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">&quot;loading&quot;</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">&quot;results&quot;</span>), <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;error&quot;</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">&quot;transcript&quot;</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">&quot;summary&quot;</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">&quot;loading&quot;</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">&quot;results&quot;</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">&quot;loading&quot;</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=j,e=U(),m(t.$$.fragment),s=U(),n=u("p"),n.textContent=i,y=U(),M=u("p"),M.innerHTML=T,C=U(),m(E.$$.fragment),N=U(),v=u("p"),v.innerHTML=W},l(w){l=h(w,"P",{"data-svelte-h":!0}),B(l)!=="svelte-vgyqps"&&(l.textContent=j),e=r(w),d(t.$$.fragment,w),s=r(w),n=h(w,"P",{"data-svelte-h":!0}),B(n)!=="svelte-cuvxj4"&&(n.textContent=i),y=r(w),M=h(w,"P",{"data-svelte-h":!0}),B(M)!=="svelte-1j055fb"&&(M.innerHTML=T),C=r(w),d(E.$$.fragment,w),N=r(w),v=h(w,"P",{"data-svelte-h":!0}),B(v)!=="svelte-160ro2n"&&(v.innerHTML=W)},m(w,G){c(w,l,G),c(w,e,G),g(t,w,G),c(w,s,G),c(w,n,G),c(w,y,G),c(w,M,G),c(w,C,G),g(E,w,G),c(w,N,G),c(w,v,G),Q=!0},p:_,i(w){Q||(f(t.$$.fragment,w),f(E.$$.fragment,w),Q=!0)},o(w){A(t.$$.fragment,w),A(E.$$.fragment,w),Q=!1},d(w){w&&(p(l),p(e),p(s),p(n),p(y),p(M),p(C),p(N),p(v)),b(t,w),b(E,w)}}}function Fs(Z){let l,j,e,t;return l=new q({props:{id:"ui",option:"python",$$slots:{default:[_s]},$$scope:{ctx:Z}}}),e=new q({props:{id:"ui",option:"javascript",$$slots:{default:[Hs]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),j=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),j=r(s),d(e.$$.fragment,s)},m(s,n){g(l,s,n),c(s,j,n),g(e,s,n),t=!0},p(s,n){const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),l.$set(i);const y={};n&2&&(y.$$scope={dirty:n,ctx:s}),e.$set(y)},i(s){t||(f(l.$$.fragment,s),f(e.$$.fragment,s),t=!0)},o(s){A(l.$$.fragment,s),A(e.$$.fragment,s),t=!1},d(s){s&&p(j),b(l,s),b(e,s)}}}function xs(Z){let l,j="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,i,y;return i=new X({props:{code:"ZGVmJTIwdHJhbnNjcmliZV9hdWRpbyhhdWRpb19maWxlX3BhdGgpJTNBJTBBJTIwJTIwJTIwJTIwJTIyJTIyJTIyVHJhbnNjcmliZSUyMGF1ZGlvJTIwdXNpbmclMjBmYWwuYWklMjBmb3IlMjBzcGVlZCUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGNsaWVudCUyMCUzRCUyMEluZmVyZW5jZUNsaWVudChwcm92aWRlciUzRCUyMmF1dG8lMjIpJTBBJTBBJTIwJTIwJTIwJTIwJTIzJTIwUGFzcyUyMHRoZSUyMGZpbGUlMjBwYXRoJTIwZGlyZWN0bHklMjAtJTIwdGhlJTIwY2xpZW50JTIwaGFuZGxlcyUyMGZpbGUlMjByZWFkaW5nJTBBJTIwJTIwJTIwJTIwdHJhbnNjcmlwdCUyMCUzRCUyMGNsaWVudC5hdXRvbWF0aWNfc3BlZWNoX3JlY29nbml0aW9uKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGF1ZGlvJTNEYXVkaW9fZmlsZV9wYXRoJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbW9kZWwlM0QlMjJvcGVuYWklMkZ3aGlzcGVyLWxhcmdlLXYzJTIyJTBBJTIwJTIwJTIwJTIwKSUwQSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHRyYW5zY3JpcHQudGV4dA==",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=j,e=U(),t=u("blockquote"),t.innerHTML=s,n=U(),m(i.$$.fragment),this.h()},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-yyu0ez"&&(l.innerHTML=j),e=r(M),t=h(M,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),B(t)!=="svelte-ha8e8i"&&(t.innerHTML=s),n=r(M),d(i.$$.fragment,M),this.h()},h(){cs(t,"class","tip")},m(M,T){c(M,l,T),c(M,e,T),c(M,t,T),c(M,n,T),g(i,M,T),y=!0},p:_,i(M){y||(f(i.$$.fragment,M),y=!0)},o(M){A(i.$$.fragment,M),y=!1},d(M){M&&(p(l),p(e),p(t),p(n)),b(i,M)}}}function Ls(Z){let l,j="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,i,y;return i=new X({props:{code:"aW1wb3J0JTIwJTdCJTIwSW5mZXJlbmNlQ2xpZW50JTIwJTdEJTIwZnJvbSUyMCUyMmh0dHBzJTNBJTJGJTJGZXNtLnNoJTJGJTQwaHVnZ2luZ2ZhY2UlMkZpbmZlcmVuY2UlMjIlM0IlMEElMEFhc3luYyUyMGZ1bmN0aW9uJTIwdHJhbnNjcmliZShmaWxlKSUyMCU3QiUwQSUyMCUyMGNvbnN0JTIwY2xpZW50JTIwJTNEJTIwbmV3JTIwSW5mZXJlbmNlQ2xpZW50KEhGX1RPS0VOKSUzQiUwQSUwQSUyMCUyMGNvbnN0JTIwb3V0cHV0JTIwJTNEJTIwYXdhaXQlMjBjbGllbnQuYXV0b21hdGljU3BlZWNoUmVjb2duaXRpb24oJTdCJTBBJTIwJTIwJTIwJTIwZGF0YSUzQSUyMGZpbGUlMkMlMEElMjAlMjAlMjAlMjBtb2RlbCUzQSUyMCUyMm9wZW5haSUyRndoaXNwZXItbGFyZ2UtdjMtdHVyYm8lMjIlMkMlMEElMjAlMjAlMjAlMjBwcm92aWRlciUzQSUyMCUyMmF1dG8lMjIlMkMlMEElMjAlMjAlN0QpJTNCJTBBJTBBJTIwJTIwcmV0dXJuJTIwb3V0cHV0LnRleHQlMjAlN0MlN0MlMjBvdXRwdXQlMjAlN0MlN0MlMjAlMjJUcmFuc2NyaXB0aW9uJTIwY29tcGxldGVkJTIyJTNCJTBBJTdE",highlighted:`<span class="hljs-keyword">import</span> { <span class="hljs-title class_">InferenceClient</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;https://esm.sh/@huggingface/inference&quot;</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">&quot;Transcription completed&quot;</span>;
}`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=j,e=U(),t=u("blockquote"),t.innerHTML=s,n=U(),m(i.$$.fragment),this.h()},l(M){l=h(M,"P",{"data-svelte-h":!0}),B(l)!=="svelte-yyu0ez"&&(l.innerHTML=j),e=r(M),t=h(M,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),B(t)!=="svelte-ha8e8i"&&(t.innerHTML=s),n=r(M),d(i.$$.fragment,M),this.h()},h(){cs(t,"class","tip")},m(M,T){c(M,l,T),c(M,e,T),c(M,t,T),c(M,n,T),g(i,M,T),y=!0},p:_,i(M){y||(f(i.$$.fragment,M),y=!0)},o(M){A(i.$$.fragment,M),y=!1},d(M){M&&(p(l),p(e),p(t),p(n)),b(i,M)}}}function Ds(Z){let l,j,e,t;return l=new q({props:{id:"transcription",option:"python",$$slots:{default:[xs]},$$scope:{ctx:Z}}}),e=new q({props:{id:"transcription",option:"javascript",$$slots:{default:[Ls]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),j=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),j=r(s),d(e.$$.fragment,s)},m(s,n){g(l,s,n),c(s,j,n),g(e,s,n),t=!0},p(s,n){const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),l.$set(i);const y={};n&2&&(y.$$scope={dirty:n,ctx:s}),e.$set(y)},i(s){t||(f(l.$$.fragment,s),f(e.$$.fragment,s),t=!0)},o(s){A(l.$$.fragment,s),A(e.$$.fragment,s),t=!1},d(s){s&&p(j),b(l,s),b(e,s)}}}function Ks(Z){let l,j=`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’ll also use the <code>:fastest</code> policy to make sure we select the best performing provider for this 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:"ZGVmJTIwZ2VuZXJhdGVfc3VtbWFyeSh0cmFuc2NyaXB0KSUzQSUwQSUyMCUyMCUyMCUyMCUyMiUyMiUyMkdlbmVyYXRlJTIwc3VtbWFyeSUyMHVzaW5nJTIwYW4lMjBJbmZlcmVuY2UlMjBQcm92aWRlciUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMGNsaWVudCUyMCUzRCUyMEluZmVyZW5jZUNsaWVudChwcm92aWRlciUzRCUyMmF1dG8lMjIpJTBBJTBBJTIwJTIwJTIwJTIwcHJvbXB0JTIwJTNEJTIwZiUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMEFuYWx5emUlMjB0aGlzJTIwbWVldGluZyUyMHRyYW5zY3JpcHQlMjBhbmQlMjBwcm92aWRlJTNBJTBBJTIwJTIwJTIwJTIwMS4lMjBBJTIwY29uY2lzZSUyMHN1bW1hcnklMjBvZiUyMGtleSUyMHBvaW50cyUwQSUyMCUyMCUyMCUyMDIuJTIwQWN0aW9uJTIwaXRlbXMlMjB3aXRoJTIwcmVzcG9uc2libGUlMjBwYXJ0aWVzJTBBJTIwJTIwJTIwJTIwMy4lMjBJbXBvcnRhbnQlMjBkZWNpc2lvbnMlMjBtYWRlJTBBJTBBJTIwJTIwJTIwJTIwVHJhbnNjcmlwdCUzQSUyMCU3QnRyYW5zY3JpcHQlN0QlMEElMEElMjAlMjAlMjAlMjBGb3JtYXQlMjB3aXRoJTIwY2xlYXIlMjBzZWN0aW9ucyUzQSUwQSUyMCUyMCUyMCUyMCUyMyUyMyUyMFN1bW1hcnklMEElMjAlMjAlMjAlMjAlMjMlMjMlMjBBY3Rpb24lMjBJdGVtcyUwQSUyMCUyMCUyMCUyMCUyMyUyMyUyMERlY2lzaW9ucyUyME1hZGUlMEElMjAlMjAlMjAlMjAlMjIlMjIlMjIlMEElMEElMjAlMjAlMjAlMjByZXNwb25zZSUyMCUzRCUyMGNsaWVudC5jaGF0LmNvbXBsZXRpb25zLmNyZWF0ZSglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBtb2RlbCUzRCUyMmRlZXBzZWVrLWFpJTJGRGVlcFNlZWstUjEtMDUyOCUzQWZhc3Rlc3QlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBtZXNzYWdlcyUzRCU1QiU3QiUyMnJvbGUlMjIlM0ElMjAlMjJ1c2VyJTIyJTJDJTIwJTIyY29udGVudCUyMiUzQSUyMHByb21wdCU3RCU1RCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMG1heF90b2tlbnMlM0QxMDAwJTBBJTIwJTIwJTIwJTIwKSUwQSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHJlc3BvbnNlLmNob2ljZXMlNUIwJTVELm1lc3NhZ2UuY29udGVudA==",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:fastest&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=j,e=U(),m(t.$$.fragment)},l(n){l=h(n,"P",{"data-svelte-h":!0}),B(l)!=="svelte-g8jq3h"&&(l.innerHTML=j),e=r(n),d(t.$$.fragment,n)},m(n,i){c(n,l,i),c(n,e,i),g(t,n,i),s=!0},p:_,i(n){s||(f(t.$$.fragment,n),s=!0)},o(n){A(t.$$.fragment,n),s=!1},d(n){n&&(p(l),p(e)),b(t,n)}}}function Ps(Z){let l,j=`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’ll also use the <code>:fastest</code> policy to make sure we select the best performing provider for this 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:"YXN5bmMlMjBmdW5jdGlvbiUyMHN1bW1hcml6ZSh0cmFuc2NyaXB0KSUyMCU3QiUwQSUyMCUyMGNvbnN0JTIwY2xpZW50JTIwJTNEJTIwbmV3JTIwSW5mZXJlbmNlQ2xpZW50KEhGX1RPS0VOKSUzQiUwQSUwQSUyMCUyMGNvbnN0JTIwcHJvbXB0JTIwJTNEJTIwJTYwQW5hbHl6ZSUyMHRoaXMlMjBtZWV0aW5nJTIwdHJhbnNjcmlwdCUyMGFuZCUyMHByb3ZpZGUlM0ElMEElMjAlMjAlMjAlMjAxLiUyMEElMjBjb25jaXNlJTIwc3VtbWFyeSUyMG9mJTIwa2V5JTIwcG9pbnRzJTBBJTIwJTIwJTIwJTIwMi4lMjBBY3Rpb24lMjBpdGVtcyUyMHdpdGglMjByZXNwb25zaWJsZSUyMHBhcnRpZXMlMEElMjAlMjAlMjAlMjAzLiUyMEltcG9ydGFudCUyMGRlY2lzaW9ucyUyMG1hZGUlMEElMEElMjAlMjAlMjAlMjBUcmFuc2NyaXB0JTNBJTIwJTI0JTdCdHJhbnNjcmlwdCU3RCUwQSUwQSUyMCUyMCUyMCUyMEZvcm1hdCUyMHdpdGglMjBjbGVhciUyMHNlY3Rpb25zJTNBJTBBJTIwJTIwJTIwJTIwJTIzJTIzJTIwU3VtbWFyeSUwQSUyMCUyMCUyMCUyMCUyMyUyMyUyMEFjdGlvbiUyMEl0ZW1zJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIzJTIzJTIwRGVjaXNpb25zJTIwTWFkZSU2MCUzQiUwQSUwQSUyMCUyMGNvbnN0JTIwcmVzcG9uc2UlMjAlM0QlMjBhd2FpdCUyMGNsaWVudC5jaGF0Q29tcGxldGlvbiglMEElMjAlMjAlMjAlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBtb2RlbCUzQSUyMCUyMmRlZXBzZWVrLWFpJTJGRGVlcFNlZWstUjEtMDUyOCUzQWZhc3Rlc3QlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjBtZXNzYWdlcyUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHJvbGUlM0ElMjAlMjJ1c2VyJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwY29udGVudCUzQSUyMHByb21wdCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCU1RCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMG1heF90b2tlbnMlM0ElMjAxMDAwJTJDJTBBJTIwJTIwJTIwJTIwJTdEJTJDJTBBJTIwJTIwJTIwJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwcHJvdmlkZXIlM0ElMjAlMjJhdXRvJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwKSUzQiUwQSUwQSUyMCUyMHJldHVybiUyMCglMEElMjAlMjAlMjAlMjByZXNwb25zZS5jaG9pY2VzJTNGLiU1QjAlNUQlM0YubWVzc2FnZSUzRi5jb250ZW50JTIwJTdDJTdDJTBBJTIwJTIwJTIwJTIwcmVzcG9uc2UlMjAlN0MlN0MlMEElMjAlMjAlMjAlMjAlMjJObyUyMHN1bW1hcnklMjBhdmFpbGFibGUlMjIlMEElMjAlMjApJTNCJTBBJTdE",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:fastest&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">&quot;No summary available&quot;</span>
  );
}`,wrap:!1}}),{c(){l=u("p"),l.innerHTML=j,e=U(),m(t.$$.fragment)},l(n){l=h(n,"P",{"data-svelte-h":!0}),B(l)!=="svelte-g8jq3h"&&(l.innerHTML=j),e=r(n),d(t.$$.fragment,n)},m(n,i){c(n,l,i),c(n,e,i),g(t,n,i),s=!0},p:_,i(n){s||(f(t.$$.fragment,n),s=!0)},o(n){A(t.$$.fragment,n),s=!1},d(n){n&&(p(l),p(e)),b(t,n)}}}function Os(Z){let l,j,e,t;return l=new q({props:{id:"summarization",option:"python",$$slots:{default:[Ks]},$$scope:{ctx:Z}}}),e=new q({props:{id:"summarization",option:"javascript",$$slots:{default:[Ps]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),j=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),j=r(s),d(e.$$.fragment,s)},m(s,n){g(l,s,n),c(s,j,n),g(e,s,n),t=!0},p(s,n){const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),l.$set(i);const y={};n&2&&(y.$$scope={dirty:n,ctx:s}),e.$set(y)},i(s){t||(f(l.$$.fragment,s),f(e.$$.fragment,s),t=!0)},o(s){A(l.$$.fragment,s),A(e.$$.fragment,s),t=!1},d(s){s&&p(j),b(l,s),b(e,s)}}}function sl(Z){let l,j="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>",i,y,M,T,C="Our app will run on port 7860 and look like this:",E,N,v='<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/inference-providers-guides/gradio-app.png" alt="Gradio app"/>',W,Q,w="To deploy, we’ll need to create a new Space and upload our files.",G,$,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,S,k="<p><strong>Note</strong>: While we used CLI authentication locally, Spaces requires the token as a secret for the deployment environment.</p>",R;return y=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:fastest&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=j,e=U(),t=u("details"),s=u("summary"),s.innerHTML=n,i=U(),m(y.$$.fragment),M=U(),T=u("p"),T.textContent=C,E=U(),N=u("p"),N.innerHTML=v,W=U(),Q=u("p"),Q.textContent=w,G=U(),$=u("ol"),$.innerHTML=z,Y=U(),S=u("blockquote"),S.innerHTML=k},l(J){l=h(J,"P",{"data-svelte-h":!0}),B(l)!=="svelte-falld9"&&(l.innerHTML=j),e=r(J),t=h(J,"DETAILS",{});var I=ds(t);s=h(I,"SUMMARY",{"data-svelte-h":!0}),B(s)!=="svelte-18nprsf"&&(s.innerHTML=n),i=r(I),d(y.$$.fragment,I),M=r(I),T=h(I,"P",{"data-svelte-h":!0}),B(T)!=="svelte-1n5m4re"&&(T.textContent=C),E=r(I),N=h(I,"P",{"data-svelte-h":!0}),B(N)!=="svelte-ibsop9"&&(N.innerHTML=v),I.forEach(p),W=r(J),Q=h(J,"P",{"data-svelte-h":!0}),B(Q)!=="svelte-13uvzr6"&&(Q.textContent=w),G=r(J),$=h(J,"OL",{"data-svelte-h":!0}),B($)!=="svelte-1yvydwn"&&($.innerHTML=z),Y=r(J),S=h(J,"BLOCKQUOTE",{"data-svelte-h":!0}),B(S)!=="svelte-1gqrdse"&&(S.innerHTML=k)},m(J,I){c(J,l,I),c(J,e,I),c(J,t,I),V(t,s),V(t,i),g(y,t,null),V(t,M),V(t,T),V(t,E),V(t,N),c(J,W,I),c(J,Q,I),c(J,G,I),c(J,$,I),c(J,Y,I),c(J,S,I),R=!0},p:_,i(J){R||(f(y.$$.fragment,J),R=!0)},o(J){A(y.$$.fragment,J),R=!1},d(J){J&&(p(l),p(e),p(t),p(W),p(Q),p(G),p($),p(Y),p(S)),b(y)}}}function ll(Z){let l,j="For JavaScript deployment, create a simple static HTML file:",e,t,s,n="<strong>📋 Click to view the complete index.html file</strong>",i,y,M,T,C="We can run our app locally by going to the file from our browser.",E,N,v='<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/inference-providers-guides/js-app.png" alt="Local app"/>',W,Q,w="To deploy:",G,$,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,S,k="<p><strong>Note</strong>: The token is securely managed by Hugging Face Spaces and accessed via <code>window.huggingface.variables.HF_TOKEN</code>.</p>",R;return y=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">&quot;https://esm.sh/@huggingface/inference&quot;</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">&quot;HF_TOKEN not configured. Please add it in Space settings.&quot;</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">&quot;file&quot;</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">&quot;loading&quot;</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">&quot;results&quot;</span>),
          <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;error&quot;</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">&quot;🎤 Starting transcription...&quot;</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">&quot;✅ Transcription completed:&quot;</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">&quot;...&quot;</span>
          );

          <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;🖊️ Starting summarization...&quot;</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">&quot;✅ Summary completed:&quot;</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">&quot;...&quot;</span>
          );

          <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;transcript&quot;</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">&quot;summary&quot;</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">&quot;loading&quot;</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">&quot;results&quot;</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">&quot;loading&quot;</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">&quot;Transcription completed&quot;</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:fastest&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">&quot;No summary available&quot;</span>
        );
      }

      <span class="hljs-keyword">const</span> <span class="hljs-title function_">show</span> = (<span class="hljs-params">el</span>) =&gt; (el.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">&quot;block&quot;</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">&quot;none&quot;</span>));
      <span class="hljs-keyword">const</span> <span class="hljs-title function_">showError</span> = (<span class="hljs-params">msg</span>) =&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">&quot;error&quot;</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=j,e=U(),t=u("details"),s=u("summary"),s.innerHTML=n,i=U(),m(y.$$.fragment),M=U(),T=u("p"),T.textContent=C,E=U(),N=u("p"),N.innerHTML=v,W=U(),Q=u("p"),Q.textContent=w,G=U(),$=u("ol"),$.innerHTML=z,Y=U(),S=u("blockquote"),S.innerHTML=k},l(J){l=h(J,"P",{"data-svelte-h":!0}),B(l)!=="svelte-msmbet"&&(l.textContent=j),e=r(J),t=h(J,"DETAILS",{});var I=ds(t);s=h(I,"SUMMARY",{"data-svelte-h":!0}),B(s)!=="svelte-4npc9i"&&(s.innerHTML=n),i=r(I),d(y.$$.fragment,I),M=r(I),T=h(I,"P",{"data-svelte-h":!0}),B(T)!=="svelte-1thvetd"&&(T.textContent=C),E=r(I),N=h(I,"P",{"data-svelte-h":!0}),B(N)!=="svelte-16bn4n3"&&(N.innerHTML=v),I.forEach(p),W=r(J),Q=h(J,"P",{"data-svelte-h":!0}),B(Q)!=="svelte-8ht9li"&&(Q.textContent=w),G=r(J),$=h(J,"OL",{"data-svelte-h":!0}),B($)!=="svelte-8vwz1w"&&($.innerHTML=z),Y=r(J),S=h(J,"BLOCKQUOTE",{"data-svelte-h":!0}),B(S)!=="svelte-1a0q7y9"&&(S.innerHTML=k)},m(J,I){c(J,l,I),c(J,e,I),c(J,t,I),V(t,s),V(t,i),g(y,t,null),V(t,M),V(t,T),V(t,E),V(t,N),c(J,W,I),c(J,Q,I),c(J,G,I),c(J,$,I),c(J,Y,I),c(J,S,I),R=!0},p:_,i(J){R||(f(y.$$.fragment,J),R=!0)},o(J){A(y.$$.fragment,J),R=!1},d(J){J&&(p(l),p(e),p(t),p(W),p(Q),p(G),p($),p(Y),p(S)),b(y)}}}function al(Z){let l,j,e,t;return l=new q({props:{id:"deployment",option:"python",$$slots:{default:[sl]},$$scope:{ctx:Z}}}),e=new q({props:{id:"deployment",option:"javascript",$$slots:{default:[ll]},$$scope:{ctx:Z}}}),{c(){m(l.$$.fragment),j=U(),m(e.$$.fragment)},l(s){d(l.$$.fragment,s),j=r(s),d(e.$$.fragment,s)},m(s,n){g(l,s,n),c(s,j,n),g(e,s,n),t=!0},p(s,n){const i={};n&2&&(i.$$scope={dirty:n,ctx:s}),l.$set(i);const y={};n&2&&(y.$$scope={dirty:n,ctx:s}),e.$set(y)},i(s){t||(f(l.$$.fragment,s),f(e.$$.fragment,s),t=!0)},o(s){A(l.$$.fragment,s),A(e.$$.fragment,s),t=!1},d(s){s&&p(j),b(l,s),b(e,s)}}}function nl(Z){let l,j,e,t,s,n,i,y,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,E,N="This project demonstrates real-world AI orchestration using multiple specialized providers within a single application.",v,W,Q,w,G="Our app will:",$,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>",S,k,R,J,I,H,is,P,ys,F,js,O,os,x,Us,ss,rs,L,Js,ls,Ts,D,ws,as,us,ns,gs='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,fs="<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 vs({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),i=new K({props:{title:"Building Your First AI App with Inference Providers",local:"building-your-first-ai-app-with-inference-providers",headingTag:"h1"}}),W=new K({props:{title:"Project Overview",local:"project-overview",headingTag:"h2"}}),k=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:[qs]},$$scope:{ctx:Z}}}),P=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}}}),O=new K({props:{title:"Step 3: Add Speech Transcription",local:"step-3-add-speech-transcription",headingTag:"h2"}}),x=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:[Os]},$$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 ks({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/inference-providers/guides/building-first-app.md"}}),{c(){l=u("meta"),j=U(),e=u("p"),t=U(),m(s.$$.fragment),n=U(),m(i.$$.fragment),y=U(),M=u("p"),M.innerHTML=T,C=U(),E=u("p"),E.textContent=N,v=U(),m(W.$$.fragment),Q=U(),w=u("p"),w.textContent=G,$=U(),z=u("ol"),z.innerHTML=Y,S=U(),m(k.$$.fragment),R=U(),m(J.$$.fragment),I=U(),m(H.$$.fragment),is=U(),m(P.$$.fragment),ys=U(),m(F.$$.fragment),js=U(),m(O.$$.fragment),os=U(),m(x.$$.fragment),Us=U(),m(ss.$$.fragment),rs=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=gs,hs=U(),ts=u("ul"),ts.innerHTML=fs,Is=U(),m(es.$$.fragment),Cs=U(),ps=u("p"),this.h()},l(a){const o=Ss("svelte-u9bgzb",document.head);l=h(o,"META",{name:!0,content:!0}),o.forEach(p),j=r(a),e=h(a,"P",{}),ds(e).forEach(p),t=r(a),d(s.$$.fragment,a),n=r(a),d(i.$$.fragment,a),y=r(a),M=h(a,"P",{"data-svelte-h":!0}),B(M)!=="svelte-1xvjfqn"&&(M.innerHTML=T),C=r(a),E=h(a,"P",{"data-svelte-h":!0}),B(E)!=="svelte-gz55cx"&&(E.textContent=N),v=r(a),d(W.$$.fragment,a),Q=r(a),w=h(a,"P",{"data-svelte-h":!0}),B(w)!=="svelte-5khb3j"&&(w.textContent=G),$=r(a),z=h(a,"OL",{"data-svelte-h":!0}),B(z)!=="svelte-8ofcwq"&&(z.innerHTML=Y),S=r(a),d(k.$$.fragment,a),R=r(a),d(J.$$.fragment,a),I=r(a),d(H.$$.fragment,a),is=r(a),d(P.$$.fragment,a),ys=r(a),d(F.$$.fragment,a),js=r(a),d(O.$$.fragment,a),os=r(a),d(x.$$.fragment,a),Us=r(a),d(ss.$$.fragment,a),rs=r(a),d(L.$$.fragment,a),Js=r(a),d(ls.$$.fragment,a),Ts=r(a),d(D.$$.fragment,a),ws=r(a),d(as.$$.fragment,a),us=r(a),ns=h(a,"P",{"data-svelte-h":!0}),B(ns)!=="svelte-cyuk9m"&&(ns.innerHTML=gs),hs=r(a),ts=h(a,"UL",{"data-svelte-h":!0}),B(ts)!=="svelte-i47df0"&&(ts.innerHTML=fs),Is=r(a),d(es.$$.fragment,a),Cs=r(a),ps=h(a,"P",{}),ds(ps).forEach(p),this.h()},h(){cs(l,"name","hf:doc:metadata"),cs(l,"content",tl)},m(a,o){V(document.head,l),c(a,j,o),c(a,e,o),c(a,t,o),g(s,a,o),c(a,n,o),g(i,a,o),c(a,y,o),c(a,M,o),c(a,C,o),c(a,E,o),c(a,v,o),g(W,a,o),c(a,Q,o),c(a,w,o),c(a,$,o),c(a,z,o),c(a,S,o),g(k,a,o),c(a,R,o),g(J,a,o),c(a,I,o),g(H,a,o),c(a,is,o),g(P,a,o),c(a,ys,o),g(F,a,o),c(a,js,o),g(O,a,o),c(a,os,o),g(x,a,o),c(a,Us,o),g(ss,a,o),c(a,rs,o),g(L,a,o),c(a,Js,o),g(ls,a,o),c(a,Ts,o),g(D,a,o),c(a,ws,o),g(as,a,o),c(a,us,o),c(a,ns,o),c(a,hs,o),c(a,ts,o),c(a,Is,o),g(es,a,o),c(a,Cs,o),c(a,ps,o),ms=!0},p(a,[o]){const As={};o&2&&(As.$$scope={dirty:o,ctx:a}),k.$set(As);const bs={};o&2&&(bs.$$scope={dirty:o,ctx:a}),H.$set(bs);const Bs={};o&2&&(Bs.$$scope={dirty:o,ctx:a}),F.$set(Bs);const Zs={};o&2&&(Zs.$$scope={dirty:o,ctx:a}),x.$set(Zs);const Es={};o&2&&(Es.$$scope={dirty:o,ctx:a}),L.$set(Es);const Qs={};o&2&&(Qs.$$scope={dirty:o,ctx:a}),D.$set(Qs)},i(a){ms||(f(s.$$.fragment,a),f(i.$$.fragment,a),f(W.$$.fragment,a),f(k.$$.fragment,a),f(J.$$.fragment,a),f(H.$$.fragment,a),f(P.$$.fragment,a),f(F.$$.fragment,a),f(O.$$.fragment,a),f(x.$$.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=!0)},o(a){A(s.$$.fragment,a),A(i.$$.fragment,a),A(W.$$.fragment,a),A(k.$$.fragment,a),A(J.$$.fragment,a),A(H.$$.fragment,a),A(P.$$.fragment,a),A(F.$$.fragment,a),A(O.$$.fragment,a),A(x.$$.fragment,a),A(ss.$$.fragment,a),A(L.$$.fragment,a),A(ls.$$.fragment,a),A(D.$$.fragment,a),A(as.$$.fragment,a),A(es.$$.fragment,a),ms=!1},d(a){a&&(p(j),p(e),p(t),p(n),p(y),p(M),p(C),p(E),p(v),p(Q),p(w),p($),p(z),p(S),p(R),p(I),p(is),p(ys),p(js),p(os),p(Us),p(rs),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(i,a),b(W,a),b(k,a),b(J,a),b(H,a),b(P,a),b(F,a),b(O,a),b(x,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 Ns(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class ol extends Ws{constructor(l){super(),$s(this,l,el,nl,Gs,{})}}export{ol as component};
