2a:null 2b:["$","title",null,{"children":"Hello Gradio Client JS | Hugging Face | Observable"}] 30:T54d,# Hello Gradio Client JS [Gradio](https://gradio.app/quickstart/) is an open-source Python library designed to create web applications and demos for machine learning and data science. It offers a simple and straightforward way to build and distribute a machine learning model, API, or data science workflow through interactive web applications using Python. With the new [`@gradio/client`](https://github.com/gradio-app/gradio/tree/main/client/js), it's easy to use any Gradio app as an API. So, after quick prototyping, if necessary, you can build custom frontend components. For example, take a look at this simple Python code: ```python import gradio as gr def greet(name): return "Hello " + name + "!" with gr.Blocks() as demo: name = gr.Textbox(label="Name") output = gr.Textbox(label="Output Box") greet_btn = gr.Button("Greet") greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet") demo.launch() ``` This code generates an interactive interface using a [Textbox component](https://gradio.app/docs/#textbox) for both input and output. You can view it live at [gradio/hello_blocks](https://huggingface.co/spaces/gradio/hello_blocks). ${await FileAttachment("hello.jpg").image({width:400})} You can explore our gallery of Spaces with the Gradio SDK [here](https://huggingface.co/spaces?filter=gradio).31:[{"id":"cc2f694e345e4fc408049912546043f1b510a08fa6e87c2eb1ae00b279d6433a5b03e4ba1625bf884021593bb15b5138f46b3e2906a4bf4cd11d71f1799e45d3","href":"https://static.observableusercontent.com/files/cc2f694e345e4fc408049912546043f1b510a08fa6e87c2eb1ae00b279d6433a5b03e4ba1625bf884021593bb15b5138f46b3e2906a4bf4cd11d71f1799e45d3","name":"hello.jpg","type":"image/jpeg","lastModified":1684367420068.44,"size":34756},{"id":"be621963551fb2c5ed3ab050233178247b39dfc8ec7c8b7dffd8688db8f213dc8765a92c2d5d2177e90772fc772916a080eb5d3ef02b57d62b1dcaa9696ede94","href":"https://static.observableusercontent.com/files/be621963551fb2c5ed3ab050233178247b39dfc8ec7c8b7dffd8688db8f213dc8765a92c2d5d2177e90772fc772916a080eb5d3ef02b57d62b1dcaa9696ede94","name":"sd.jpg","type":"image/jpeg","lastModified":1684367494443.071,"size":81942},{"id":"b64a9ab932ecd0820a7b70fe48b3068f21cf1b53cdc29a14f21cf10c800da629dba8e74b7bca89ea441f8be36ae76cdd2630ea6f0fc9c3f8b16cb81792b0be99","href":"https://static.observableusercontent.com/files/b64a9ab932ecd0820a7b70fe48b3068f21cf1b53cdc29a14f21cf10c800da629dba8e74b7bca89ea441f8be36ae76cdd2630ea6f0fc9c3f8b16cb81792b0be99","name":"cats.jpeg","type":"image/jpeg","lastModified":1684370240822.024,"size":173131},{"id":"d7bc32cd36503d2328839f6965b1b75e378a03e8a1fcb0ca78ede0ecbf7de9f36cd431e810337888876eeb82bf3d04e5cf7040921fc3eedc3b14e2b141fe6ac3","href":"https://static.observableusercontent.com/files/d7bc32cd36503d2328839f6965b1b75e378a03e8a1fcb0ca78ede0ecbf7de9f36cd431e810337888876eeb82bf3d04e5cf7040921fc3eedc3b14e2b141fe6ac3","name":"image-captioning.jpg","type":"image/jpeg","lastModified":1684370275951.166,"size":133209},{"id":"21fac0450ec6ca91ba206d723be83817d26c6a57d6840dd12a80f1bf2f0e3df2840b976470326ebe6bc9cbd582c0417e83dc407266f80f2b216230b086d8e0b4","href":"https://static.observableusercontent.com/files/21fac0450ec6ca91ba206d723be83817d26c6a57d6840dd12a80f1bf2f0e3df2840b976470326ebe6bc9cbd582c0417e83dc407266f80f2b216230b086d8e0b4","name":"tts.jpg","type":"image/jpeg","lastModified":1684473478779.06,"size":74169},{"id":"947ba29b0c4528f68913c677de87d588ae9b4fd0acedbffb018632be780449c4d48329396fbc73c30e7cc3c6a1d1d4d7c962b2698b71c1274f47798e7951a259","href":"https://static.observableusercontent.com/files/947ba29b0c4528f68913c677de87d588ae9b4fd0acedbffb018632be780449c4d48329396fbc73c30e7cc3c6a1d1d4d7c962b2698b71c1274f47798e7951a259","name":"chat.jpg","type":"image/jpeg","lastModified":1684473992092.082,"size":101684}] 2e:{"id":"540c38986e35deff","slug":"hello-gradio-client-js","title":"Hello Gradio Client JS","thumbnail":"acc821ad23b16067ff6b273cc1b56ded4bea34c55a7f7c7f6d513e471fe02d11","access_level":"public","create_time":"$D2023-05-12T21:44:58.808Z","update_time":"$D2024-06-20T00:18:04.439Z","view_time":null,"first_public_time":"$D2023-05-22T18:26:48.835Z","has_unpublished_edits":null,"fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face","avatar_url":"https://avatars-next.observableusercontent.com/798cf3379d3840e4759a43470c74a7225fe5d81c88a08e763c446c93eff8797c","tier":"pro"},"version":1072,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"},{"type":"team","id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face","avatar_url":"https://avatars-next.observableusercontent.com/798cf3379d3840e4759a43470c74a7225fe5d81c88a08e763c446c93eff8797c","tier":"pro","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"b266593bd5204dc4","slug":"javascript-toolkits","title":"🤗 JavaScript Guides 📚","owner":{"id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face"}},"type":"notebook","body":{"titling":"auto","title":"Hello Gradio Client JS","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"## Loading via [@gradio/client](https://github.com/gradio-app/gradio/tree/main/client/js)\n\n\nFirst import *@gradio/client* from NPM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"gr = import(\"@gradio/client@1.1.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"Now we can load the app as a Gradio client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"hello = gr.Client.connect(\"gradio/hello_blocks\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"We can view the API details info by calling `hello.view_api()` \n\n\n```\n${JSON.stringify(await hello.view_api(), null, 2)}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"Let's use the `named_endpoints` `/greet` as designed on your Gradio Python code above. We will send the required input text string and then call the predict() function, then wait for the result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"helloResult = hello.predict(\"/greet\", { name: \"This is me from Observable\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"the result data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"helloResult.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"----\n### Stable Diffusion Gradio Space\nLets load a fun Space as example\nStable Diffusion text to image model Space looks like this, you can also access the interface on this link [stabilityai/stable-diffusion](https://huggingface.co/spaces/stabilityai/stable-diffusion). It uses two [Textbox component](https://gradio.app/docs/#textbox) and one [Number](https://gradio.app/docs/#number) as input, and it returns an image [Gallery component](https://gradio.app/docs/#Galley) as output.\n\n${await FileAttachment(\"sd.jpg\").image({width:400})}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"Load [`stabilityai/stable-diffusion`](https://huggingface.co/spaces/stabilityai/stable-diffusion) Space as a Gradio client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"sd = gr.Client.connect(\"stabilityai/stable-diffusion-3-medium\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"You can print and view the api, click on the inspector to explore the `Object`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"sd.view_api()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"This Space doesn't have a named endpoint, however you can still use it by passing the `unnamed_endpoints` index and the expected inputs. For this Space you need a **prompt** **negative prompt** and **guidance scale**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"viewof sd_values = guard(\n ({ template }) =>\n Inputs.form(\n {\n prompt: Inputs.text({\n label: \"Prompt\",\n value: \"award wining photo of a flying cat\"\n }),\n negative_prompt: Inputs.text({\n label: \"Negative Prompt\",\n value: \"low resolution, blurry, colors, colored photo\"\n }),\n guidance_scale: Inputs.range([0, 20], {\n label: \"Guidance Scale\",\n value: 8,\n step: 0.1\n })\n },\n { template }\n ),\n { width: \"100%\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"The result data shape depends on you how you implemented your Gradio app, in this example it returns an array of Images to populate a [Gallery component](https://gradio.app/docs/#gallery). The input values are coming from the input componante [sd_values](#sd_values) above","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"result = sd.predict(\"/infer\", {\n prompt: \"Hello!!\",\n negative_prompt: \"\",\n seed: 0,\n randomize_seed: true,\n width: 1024,\n height: 1024,\n guidance_scale: 7,\n num_inference_steps: 20\n})\n// {\n// prompt: sd_values.prompt,\n// negative_prompt: sd_values.negative_prompt,\n// guidance_scale: sd_values.guidance_scale,\n// seed: 0,\n// randomize_seed: true,\n// width: 1024,\n// height: 1024,\n// num_inference_steps: 30\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"result","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"The result data is an array of base64 images, lets iterate of it and create a HTML Image element for each and render it on a 2 column CSS grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"html`\n

\n ${result.data[0].map((entry) => {\n const img = new Image();\n img.src = entry[0].data;\n img.style.width = \"100%\";\n return img;\n })}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"----\n### Image Captioning Space \nThis Space provides access to 5 different state-of-art vision language models, extracting text caption from an image, try it here [nielsr/comparing-captioning-models](https://huggingface.co/spaces/nielsr/comparing-captioning-models). It uses an [Image component](https://gradio.app/docs/#Image) as input and returns 5 strings to [Textbox components](https://gradio.app/docs/#textbox)\n\n${await FileAttachment(\"image-captioning.jpg\").image({width:400})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"Load [nielsr/comparing-captioning-models](https://huggingface.co/spaces/nielsr/comparing-captioning-models) as Gradio client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"captioning = gr.client(\"nielsr/comparing-captioning-models\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"captioningApi = captioning.view_api()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"We'll use the named endpoint **predict** and send an Image blob as input\n\n${await FileAttachment(\"cats.jpeg\").image({width: 400})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"imageCaptions = captioning.predict(\"/predict\", [\n await FileAttachment(\"cats.jpeg\").blob()\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"we can now zip `imageCaptions` results with `captioningApi` labels data\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"Inputs.table(\n captioningApi.named_endpoints[\"/predict\"].returns.map((r, i) => ({\n label: r.label,\n result: imageCaptions.data[i]\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"----\n### Text To Speech Spaces\n\nIn this example from [elevenlabs/tts](https://huggingface.co/spaces/elevenlabs/tts), it demos a very advanced TTS system. It requires a [Textbox component](https://gradio.app/docs/#textbox) with the text to be converted to speech, a [Dropdown](https://gradio.app/docs/#dropdown) with voice selection and a model selection.\n\n${await FileAttachment(\"tts.jpg\").image({width:400})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":819,"value":"Load [elevenlabs/tts](https://huggingface.co/spaces/elevenlabs/tts) as Gradio client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":574,"value":"eleven = gr.Client.connect(\"elevenlabs/tts\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"eleven.view_api()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"viewof tts_values = guard(\n ({ template }) =>\n Inputs.form(\n {\n text: Inputs.text({\n label: \"Text\",\n width: \"100%\",\n value:\n \"sehr sehr gut! Hello this is amazing, TTS direct from ObservableHQ. très très bien!\"\n }),\n voice: Inputs.select(\n [\n \"Rachel\",\n \"Domi\",\n \"Bella\",\n \"Antoni\",\n \"Elli\",\n \"Josh\",\n \"Arnold\",\n \"Adam\",\n \"Sam\"\n ],\n {\n width: \"100%\",\n label: \"Voice\",\n value: \"Bella\"\n }\n )\n },\n { template }\n ),\n { width: \"100%\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"elevenResult = await eleven.predict(0, [\n tts_values.text,\n tts_values.voice,\n \"eleven_multilingual_v1\"\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"elevenResult","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"Predictions returns a file location on the server backend `${await elevenResult.data[0].data}` which we can easily load on an HTML Audio element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"html`\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"----\n### Chat Streaming\nHere is more advanced example, this is a [ChatBot component](https://gradio.app/docs/#chatbot)interface with [Streaming data](https://gradio.app/key-features/#iterative-outputs) as output.You can try the live app here [ysharma/RedPajama-Chat-3B](https://huggingface.co/spaces/ysharma/RedPajama-Chat-3B) \n\n${await FileAttachment(\"chat.jpg\").image({width:400})}\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":854,"value":"Load [ysharma/RedPajama-Chat-3B](https://huggingface.co/spaces/ysharma/RedPajama-Chat-3B) as Gradio client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"chatStreaming = gr.Client.connect(\"ysharma/RedPajama-Chat-3B\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"chatStreaming.view_api()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"viewof chatQuestion = Inputs.text({\n label: \"Chat Question\",\n width: \"100%\",\n value: \"Can you explain to me briefly what is Python programming language?\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"For this example we will use to call the prediction endpoint since we need to follow the status updates of the streamed data. \nThe code below takes advantage of Observable native cells generators, thus when we call `chatStreaming` we interactive update and yield `status` and `data` while status is not completed\n\nIn this example, we'll use the [`submit()`](https://gradio.app/docs/#javascript-client-library) function to call the prediction endpoint. This is necessary for following the status updates of the streamed data. The code below leverages native cell generators of Observable. We invoke `chatStreaming` and it interactively update and yield both `status` and `data` until completed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"chatStreamingResult = {\n // status: \"pending\" | \"error\" | \"complete\" | \"generating\";\n let status = \"\";\n let data = null;\n yield { status, data };\n chatStreaming\n .submit(3, [[[chatQuestion, \"\"]], 0.95, 500, 1])\n .on(\"status\", (evt) => (status = evt.stage))\n .on(\"data\", (evt) => (data = evt.data[0]));\n\n while (status !== \"error\" && status !== \"complete\") {\n yield { status, data };\n }\n yield { status, data };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"{\n if (chatStreamingResult.data) {\n return html`\n\n

\n${chatStreamingResult.data.map((row) => {\n return html`\n

${row[0]}

${row[1]}

\n `;\n})}\n

\n`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"\n----\n##### imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"import { guard } from \"@mootari/inputs-submit\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"