1import{A as e,J as t,O as n,Y as r,lt as i,q as a,ut as o}from"./DMpphp8D.js";import"./CcthiBXZ.js";import{t as s}from"./D_HVipi9.js";var c=e(`<h1>Clients 1.0 Launch!</h1> <p>Weâre excited to unveil the first major release of the Gradio clients. 2Weâve made it even easier to turn any Gradio application into a production endpoint thanks to the clientsâ <strong>ergonomic</strong>, <strong>transparent</strong>, and <strong>portable</strong> design.</p> <h3 class="group header-tag" id="ergonomic-api">Ergonomic API ð<a href="#ergonomic-api" class="invisible group-hover-visible"><img src="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/anchor.svg" class="anchor-img-small"/></a></h3> <br/> <p><strong>Stream From a Gradio app in 5 lines</strong></p> <br/> <p>Use the <code>submit</code> method to get a job you can iterate over.</p> <br/> <p>In python:</p> <div class="codeblock"><!><pre class="language-python"><code class="language-python"><span class="token keyword">from</span> gradio_client <span class="token keyword">import</span> Client 3 4client <span class="token operator">=</span> Client<span class="token punctuation">(</span><span class="token string">"gradio/llm_stream"</span><span class="token punctuation">)</span> 5 6<span class="token keyword">for</span> result <span class="token keyword">in</span> client<span class="token punctuation">.</span>submit<span class="token punctuation">(</span><span class="token string">"What's the best UI framework in Python?"</span><span class="token punctuation">)</span><span class="token punctuation">:</span> 7 <span class="token keyword">print</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span></code></pre></div> <br/> <p>In typescript:</p> <div class="codeblock"><!><pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> Client <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@gradio/client"</span><span class="token punctuation">;</span> 8 9<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">await</span> Client<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token string">"gradio/llm_stream"</span><span class="token punctuation">)</span> 10<span class="token keyword">const</span> job <span class="token operator">=</span> client<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token string">"/predict"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token string-property property">"text"</span><span class="token operator">:</span> <span class="token string">"What's the best UI framework in Python?"</span><span class="token punctuation">}</span><span class="token punctuation">)</span> 11 12<span class="token keyword">for</span> <span class="token keyword">await</span> <span class="token punctuation">(</span><span class="token keyword">const</span> msg <span class="token keyword">of</span> job<span class="token punctuation">)</span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>data<span class="token punctuation">)</span></code></pre></div> <br/> <p><strong>Use the same keyword arguments as the app</strong></p> <br/> In the examples below, the upstream app has a function with parameters called \`message\`, \`system_prompt\`, and \`tokens\`. 13We can see that the client \`predict\` call uses the same arguments. <p>In python:</p> <div class="codeblock"><!><pre class="language-python"><code class="language-python"><span class="token keyword">from</span> gradio_client <span class="token keyword">import</span> Client 14 15client <span class="token operator">=</span> Client<span class="token punctuation">(</span><span class="token string">"http://127.0.0.1:7860/"</span><span class="token punctuation">)</span> 16result <span class="token operator">=</span> client<span class="token punctuation">.</span>predict<span class="token punctuation">(</span> 17 message<span class="token operator">=</span><span class="token string">"Hello!!"</span><span class="token punctuation">,</span> 18 system_prompt<span class="token operator">=</span><span class="token string">
18"You are helpful AI."</span><span class="token punctuation">,</span> 19 tokens<span class="token operator">=</span><span class="token number">10</span><span class="token punctuation">,</span> 20 api_name<span class="token operator">=</span><span class="token string">"/chat"</span> 21<span class="token punctuation">)</span> 22<span class="token keyword">print</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span></code></pre></div> <p>In typescript:</p> <div class="codeblock"><!><pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> Client <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@gradio/client"</span><span class="token punctuation">;</span> 23 24<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">await</span> Client<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token string">"http://127.0.0.1:7860/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 25<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> client<span class="token punctuation">.</span><span class="token function">predict</span><span class="token punctuation">(</span><span class="token string">"/chat"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> 26 message<span class="token operator">:</span> <span class="token string">"Hello!!"</span><span class="token punctuation">,</span> 27 system_prompt<span class="token operator">:</span> <span class="token string">"Hello!!"</span><span class="token punctuation">,</span> 28 tokens<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> 29<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 30 31<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <br/> <p><strong>Better Error Messages</strong></p> <br/> If something goes wrong in the upstream app, the client will raise the same exception as the app provided that \`show_error=True\` in the original app's \`launch()\` function, or it's a \`gr.Error\` exception. <h3 class="group header-tag" id="transparent-design">Transparent Design ðª<a href="#transparent-design" class="invisible group-hover-visible"><img src="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/anchor.svg" class="anchor-img-small"/></a></h3> <p>Anything you can do in the UI, you can do with the client:</p> <ul><li>ðAuthentication</li> <li>ð Job Cancelling</li> <li>â¹ï¸ Access Queue Position and API</li> <li>ð View the API information</li></ul> <br/> Here's an example showing how to display the queue position of a pending job: <div class="codeblock"><!><pre class="language-python"><code class="language-python"><span class="token keyword">from</span> gradio_client <span class="token keyword">import</span> Client 32 33client <span class="token operator">=</span> Client<span class="token punctuation">(</span><span class="token string">"gradio/diffusion_model"</span><span class="token punctuation">)</span> 34 35job <span class="token operator">=</span> client<span class="token punctuation">.</span>submit<span class="token punctuation">(</span><span class="token string">"A cute cat"</span><span class="token punctuation">)</span> 36<span class="token keyword">while</span> <span class="token keyword">not</span> job<span class="token punctuation">.</span>done<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> 37 status <span class="token operator">=</span> job<span class="token punctuation">.</span>status<span class="token punctuation">(</span><span class="token punctuation">)</span> 38 <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string-interpolation"><span class="token string">f"Current in position </span><span class="token interpolation"><span class="token punctuation">{</span>status<span class="token punctuation">.</span>rank<span class="token punctuation">}</span></span><span class="token string"> out of </span><span class="token interpolation"><span class="token punctuation">{</span>status<span class="token punctuation">.</span>queue_size<span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span></code></pre></div> <h3 class="group header-tag" id="portable-design">Portable Design âºï¸<a href="#portable-design" class="invisible group-hover-visible"><img src="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/anchor.svg" class="anchor-img-small"/></a></h3> <br/> The client can run from pretty much any python and javascript environment (node, deno, the browser, Service Workers). <br/> Here's an example using the client from a Flask server using gevent: <div class="codeblock"><!><pre class="language-python"><code class="language-python"><span class="token keyword">from</span> gevent <span class="token keyword">
38import</span> monkey 39monkey<span class="token punctuation">.</span>patch_all<span class="token punctuation">(</span><span class="token punctuation">)</span> 40 41<span class="token keyword">from</span> gradio_client <span class="token keyword">import</span> Client 42<span class="token keyword">from</span> flask <span class="token keyword">import</span> Flask<span class="token punctuation">,</span> send_file 43<span class="token keyword">import</span> time 44 45app <span class="token operator">=</span> Flask<span class="token punctuation">(</span>__name__<span class="token punctuation">)</span> 46 47imageclient <span class="token operator">=</span> Client<span class="token punctuation">(</span><span class="token string">"gradio/diffusion_model"</span><span class="token punctuation">)</span> 48 49<span class="token decorator annotation punctuation">@app<span class="token punctuation">.</span>route</span><span class="token punctuation">(</span><span class="token string">"/gen"</span><span class="token punctuation">)</span> 50<span class="token keyword">def</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> 51 result <span class="token operator">=</span> imageclient<span class="token punctuation">.</span>predict<span class="token punctuation">(</span> 52 <span class="token string">"A cute cat"</span><span class="token punctuation">,</span> 53 api_name<span class="token operator">=</span><span class="token string">"/predict"</span> 54 <span class="token punctuation">)</span> 55 <span class="token keyword">return</span> send_file<span class="token punctuation">(</span>result<span class="token punctuation">)</span> 56 57<span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">"__main__"</span><span class="token punctuation">:</span> 58 app<span class="token punctuation">.</span>run<span class="token punctuation">(</span>host<span class="token operator">=</span><span class="token string">"0.0.0.0"</span><span class="token punctuation">,</span> port<span class="token operator">=</span><span class="token number">5000</span><span class="token punctuation">)</span></code></pre></div> <h3 class="group header-tag" id="v1-0-migration-guide-and-breaking-changes">v1.0 Migration Guide and Breaking Changes<a href="#v1-0-migration-guide-and-breaking-changes" class="invisible group-hover-visible"><img src="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/anchor.svg" class="anchor-img-small"/></a></h3> <br/> <p><strong>Python</strong></p> <ul><li>The \`serialize\` argument of the \`Client\` class was removed and has no effect.</li> <li>The \`upload_files\` argument of the \`Client\` was removed.</li> <li>All filepaths must be wrapped in the \`handle_file\` method. For example, \`caption = client.predict(handle_file('./dog.jpg'))\`.</li> <li>The \`output_dir\` argument was removed. It is not specified in the \`download_files\` argument.</li></ul> <br/> <p><strong>Javascript</strong></p> <br/> The client has been redesigned entirely. It was refactored from a function into a class. An instance can now be constructed by awaiting the \`connect\` method. <div class="codeblock"><!><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">await</span> Client<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token string">"gradio/whisper"</span><span class="token punctuation">)</span></code></pre></div> <p>The app variable has the same methods as the python class (<code>submit</code>, <code>predict</code>, <code>view_api</code>, <code>duplicate</code>).</p>`,1);function l(e){var l=c(),u=r(t(l),18);s(a(u),{content:`from gradio_client import Client 59 60client = Client("gradio/llm_stream") 61 62for result in client.submit("What's the best UI framework in Python?"): 63 print(result)`}),i(),o(u);var d=r(u,6);s(a(d),{content:`import { Client } from "@gradio/client"; 64 65const client = await Client.connect("gradio/llm_stream") 66const job = client.submit("/predict", {"text": "What's the best UI framework in Python?"}) 67 68for await (const msg of job) console.log(msg.data)`}),i(),o(d);var f=r(d,10);s(a(f),{content:`from gradio_client import Client 69 70client = Client("http://127.0.0.1:7860/") 71result = client.predict( 72 message="Hello!!", 73 system_prompt="You are helpful AI.", 74 tokens=10, 75 api_name="/chat" 76) 77print(result)`}),i(),o(f);var p=r(f,4);s(a(p),{content:`import { Client } from "@gradio/client"; 78 79const client = await Client.connect("http://127.0.0.1:7860/"); 80const result = await client.predict("/chat", { 81 message: "Hello!!", 82 system_prompt: "Hello!!", 83 tokens: 10, 84}); 85 86console.log(result.data);`}),i(),o(p);var m=r(p,16);s(a(m),{content:`from gradio_client import Client 87 88client = Client("gradio/diffusion_model") 89 90job = client.submit("A cute cat") 91while not job.done(): 92 status = job.status() 93 print(f"Current in position {status.rank}
93 out of {status.queue_size}")`}),i(),o(m);var h=r(m,8);s(a(h),{content:`from gevent import monkey 94monkey.patch_all() 95 96from gradio_client import Client 97from flask import Flask, send_file 98import time 99 100app = Flask(__name__) 101 102imageclient = Client("gradio/diffusion_model") 103 104@app.route("/gen") 105def gen(): 106 result = imageclient.predict( 107 "A cute cat", 108 api_name="/predict" 109 ) 110 return send_file(result) 111 112if __name__ == "__main__": 113 app.run(host="0.0.0.0", port=5000)`}),i(),o(h);var g=r(h,16);s(a(g),{content:`const app = await Client.connect("gradio/whisper")`}),i(),o(g),i(2),n(e,l)}export{l as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.