Spaces:
Running
Running
| (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{3092:function(e,t,r){Promise.resolve().then(r.bind(r,3011))},3011:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return Z}});var a=r(7437),n=r(2265),s=e=>{let{text:t,speed:r=50}=e,[s,o]=(0,n.useState)(""),[l,d]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{let e=0,a=t.length,n=setInterval(()=>{e<a?(o(t.slice(0,e+1)),e++):(clearInterval(n),d(!0))},r);return()=>clearInterval(n)},[t,r]),(0,a.jsxs)("span",{className:"inline-flex items-center",children:[s,!l&&(0,a.jsx)("span",{className:"ml-0.5 h-5 w-0.5 bg-current animate-blink"})]})},o=r(1994),l=r(3335);function d(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return(0,l.m6)((0,o.W)(t))}let i=n.forwardRef((e,t)=>{let{className:r,type:n,...s}=e;return(0,a.jsx)("input",{type:n,className:d("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",r),ref:t,...s})});i.displayName="Input";var c=r(9304);let u=null,m=null;async function p(e,t,r,a){try{(u=new c.Lh).setInitProgressCallback(x),await u.reload(e,{temperature:t,top_p:r}),a()}catch(e){throw console.error("Error loading model:",e),e}}function x(e){m&&m(e.text)}async function f(e,t,r,a){if(!u){a(Error("Engine not initialized"));return}try{let a,s="";for await(let r of(await u.chat.completions.create({stream:!0,messages:e,stream_options:{include_usage:!0}}))){var n;let e=null===(n=r.choices[0])||void 0===n?void 0:n.delta.content;e&&(s+=e),r.usage&&(a=r.usage),t(s)}let o=await u.getMessage();if(a)r(o,a);else throw Error("Usage data not available")}catch(e){a(e)}}async function g(e,t,r){let a=[{role:"system",content:"The user will ask you a tricky question, your job is to write Python code to answer the question. \n\nReally think step by step before writing any code to ensure you're answering the question correctly. \n\nRespond with a markdown code block starting with ```python and ``` at the end. Make sure the code can be executed without any changes."},{role:"user",content:e}];try{await f(a,e=>{r.onResultUpdate(e)},async(e,n)=>{r.onResultUpdate(e),r.onUsageUpdate(n),console.log("Usage:",n);let s=function(e){let t=e.match(/```(?:python)?\n([\s\S]*?)\n```/);return t&&t[1]?t[1].trim():null}(e);if(s)try{let{results:n,error:o}=await t(s);if(o)r.onErrorUpdate(!0),r.onCodeOutputUpdate("Execution Error:\n".concat(o));else if(n){r.onCodeOutputUpdate("Output:\n".concat(n.stdout,"\nResult: ").concat(n.result));let t=[...a,{role:"assistant",content:e},{role:"user",content:"I ran your Python code which returned ".concat(n.result," and the printed output: ").concat(n.stdout,".\n You should use the result and the printed output to answer the users question. No need to explain the code, just use the results to answer the question.")}];console.log("Explanation Messages:",t),await f(t,e=>{r.onExplanationUpdate(e)},(e,t)=>{r.onExplanationUpdate(e),r.onUsageUpdate(t)},e=>{r.onErrorUpdate(!0),r.onExplanationUpdate("Error generating explanation: ".concat(e.message))})}}catch(e){r.onErrorUpdate(!0),r.onCodeOutputUpdate("Execution Error:\n".concat(e.message))}},e=>{r.onErrorUpdate(!0),r.onResultUpdate(e.message)})}catch(e){r.onErrorUpdate(!0),r.onResultUpdate(e.message)}}c.up.model_list.filter(e=>1!==e.model_type&&2!==e.model_type).map(e=>e.model_id);var h=e=>{let{progress:t}=e;return(0,a.jsxs)("div",{className:"w-full max-w-md mb-6 bg-emerald-800 rounded-lg shadow-md overflow-hidden",children:[(0,a.jsx)("div",{className:"px-4 py-3 bg-emerald-700",children:(0,a.jsx)("h3",{className:"text-emerald-100 font-semibold",children:"Loading Progress"})}),(0,a.jsx)("div",{className:"p-4",children:(0,a.jsx)("p",{className:"text-emerald-200 text-sm break-words",children:t})})]})},b=r(8811),w=r(5293);let y=(0,r(7712).j)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),v=n.forwardRef((e,t)=>{let{className:r,variant:n,size:s,asChild:o=!1,...l}=e,i=o?w.g7:"button";return(0,a.jsx)(i,{className:d(y({variant:n,size:s,className:r})),ref:t,...l})});v.displayName="Button";var j=r(7765),N=r(2069),E=r(9880),U=r(3037),k=r(3756);r(2446);var _=r(9218),S=r(454),C=r(7647);N.Z.registerLanguage("typescript",_.Z),N.Z.registerLanguage("javascript",S.Z),N.Z.registerLanguage("python",C.Z);let L=e=>{let{language:t,value:r}=e;return(0,a.jsxs)("div",{className:"relative group",children:[(0,a.jsx)("div",{className:"absolute top-0 right-0 bg-emerald-700 text-emerald-50 rounded-bl px-1.5 py-0.5 text-[10px] font-mono tracking-wide opacity-70 transition-opacity group-hover:opacity-100",children:t}),(0,a.jsx)(N.Z,{language:t,style:E.Z,showLineNumbers:!0,className:"rounded-md text-xs overflow-x-auto pt-5",children:r})]})};var R=e=>{let{content:t,className:r}=e;return(0,a.jsx)("div",{className:"prose prose-sm prose-invert max-w-none ".concat(r||""),children:(0,a.jsx)(j.U,{components:{code:e=>{let{className:t,children:r,...n}=e,s=/language-(\w+)/.exec(t||""),o=s?s[1]:"",l=String(r).replace(/\n$/,"");return o?(0,a.jsx)(L,{language:o,value:l,...n}):(0,a.jsx)("code",{className:"px-1 py-0.5 rounded bg-emerald-700 text-emerald-100 text-xs",...n,children:r})}},remarkPlugins:[U.Z],rehypePlugins:[k.Z],children:t})})};function Z(){let[e,t]=(0,n.useState)(""),[o,l]=(0,n.useState)(null),[d,c]=(0,n.useState)(null),[u,x]=(0,n.useState)(!1),[f,w]=(0,n.useState)(!1),{runPython:y,isLoading:j}=function(){let[e,t]=(0,n.useState)(null),[a,s]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{let e=new Worker(r.tu(new URL(r.p+r.u(583),r.b)));return t(e),()=>{e.terminate()}},[]),{runPython:(0,n.useCallback)(t=>new Promise((r,a)=>{if(!e){a(Error("Worker not initialized"));return}s(!0);let n=Date.now().toString(),o=t=>{t.data.id===n&&(s(!1),e.removeEventListener("message",o),t.data.results?r({results:t.data.results,error:null}):t.data.error&&r({results:null,error:t.data.error}))};e.addEventListener("message",o),e.postMessage({id:n,python:t})}),[e]),isLoading:a}}(),[N,E]=(0,n.useState)(!1),[U,k]=(0,n.useState)(""),[_,S]=(0,n.useState)(!1),[C,L]=(0,n.useState)(null),[Z,I]=(0,n.useState)(null);(0,n.useEffect)(()=>{m=k},[]);let P=async()=>{E(!0);try{await p("Qwen2.5-Coder-1.5B-Instruct-q4f16_1-MLC",.7,1,()=>{w(!0),k("Model loaded successfully")})}catch(e){x(!0),l(e.message)}finally{E(!1)}},O=async t=>{if(t.preventDefault(),f&&!_){S(!0),l(""),c(""),L(null),x(!1),I(null);try{await g(e,y,{onResultUpdate:l,onCodeOutputUpdate:L,onExplanationUpdate:c,onErrorUpdate:x,onUsageUpdate:I})}catch(e){x(!0),l(e.message)}finally{S(!1)}}};return(0,a.jsx)("div",{className:"flex flex-col min-h-screen bg-emerald-900",children:(0,a.jsxs)("main",{className:"flex-grow flex flex-col items-center justify-center px-4 py-24",children:[(0,a.jsxs)("div",{className:"font-alphaLyrae text-center mb-8",children:[(0,a.jsx)("h1",{className:"font-extrabold text-emerald-50 text-4xl sm:text-6xl",children:"Qwen Code Interpreter"}),(0,a.jsx)("p",{className:"text-emerald-200 text-xl sm:text-2xl mt-4",children:(0,a.jsx)(s,{speed:60,text:"Qwen-2.5-Coder 1.5B with access to an in-browser code interpreter."})})]}),!f&&(0,a.jsx)(v,{onClick:P,disabled:j||N,className:"mb-4 font-alphaLyrae px-6 py-6 bg-emerald-600 text-emerald-100 rounded-lg hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 ease-in-out font-semibold text-lg shadow-md",children:N?(0,a.jsxs)("span",{className:"flex items-center",children:[(0,a.jsx)(b.Z,{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-emerald-100"}),"Loading..."]}):"Load AGI Mini 1.5B"}),U&&!f&&(0,a.jsx)(h,{progress:U}),(0,a.jsx)("form",{onSubmit:O,className:"w-full max-w-2xl mb-4",children:(0,a.jsx)(i,{value:e,onChange:e=>t(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),O(e))},className:"w-full p-8 font-mono text-sm bg-emerald-800 text-emerald-100 border-emerald-600 focus:ring-emerald-500 focus:border-emerald-500 rounded-md resize-none placeholder:text-emerald-300/70",placeholder:"How many r's are in 'strawberry'?",disabled:!f||_})}),_&&(0,a.jsx)("p",{className:"text-emerald-200 mt-4",children:"Streaming response..."}),u&&(0,a.jsxs)("div",{className:"bg-red-900/50 border border-red-700 p-4 rounded-md mt-4 w-full max-w-2xl",children:[(0,a.jsx)("h3",{className:"text-red-200 font-semibold mb-2",children:"Error:"}),(0,a.jsx)("pre",{className:"text-red-100 whitespace-pre-wrap text-sm",children:o})]}),o&&!u&&(0,a.jsx)("div",{className:"bg-emerald-800 p-4 rounded-t mt-4 w-full max-w-2xl overflow-auto",children:(0,a.jsx)(R,{content:o,className:"text-emerald-100"})}),C&&(0,a.jsxs)("div",{className:"bg-teal-800 p-4 w-full max-w-2xl overflow-auto border-t border-teal-700",children:[(0,a.jsx)("h3",{className:"text-teal-200 font-semibold mb-2",children:"Code Output:"}),(0,a.jsx)(R,{content:"```output\n".concat(C,"\n```")})]}),d&&(0,a.jsxs)("div",{className:"bg-emerald-700 p-4 rounded-b w-full max-w-2xl overflow-auto border-t border-emerald-600",children:[(0,a.jsxs)("div",{className:"flex justify-between items-center mb-2",children:[(0,a.jsx)("h3",{className:"text-emerald-200 font-semibold",children:"Explanation:"}),Z&&(0,a.jsxs)("div",{className:"bg-emerald-600 text-emerald-50 rounded px-1.5 py-0.5 text-xs font-mono tracking-wide",children:[Z.extra.decode_tokens_per_s.toFixed(2)," tok/s"]})]}),(0,a.jsx)(R,{content:d,className:"text-emerald-50"})]})]})})}}},function(e){e.O(0,[329,954,333,17,971,117,744],function(){return e(e.s=3092)}),_N_E=e.O()}]); |