Last chance! 50% off DataCamp Premium
Sale ends in
आज के AI मॉडलों की उपयोगिता बिना सुगम यूज़र इंटरफ़ेस के काफी कम हो जाती है। Gradio, जो एक ओपन-सोर्स Python वेब UI लाइब्रेरी है, की मदद से आप LLMs और गैर-तकनीकी अंतिम उपयोगकर्ताओं के बीच की दूरी कम कर सकते हैं। यह आपको अपने AI प्रोजेक्ट्स के लिए तेज़ प्रोटोटाइप बनाने और उन्हें व्यापक दर्शकों तक सरलता से तैनात करने देता है।
यह ट्यूटोरियल उन मशीन लर्निंग इंजीनियरों के लिए है जिनके पास आमतौर पर वेब विकास का अनुभव नहीं होता। इसमें Gradio के मूल सिद्धांत और शब्दावली, विभिन्न AI मॉडल प्रकारों के लिए इंटरफ़ेस बनाना, UX और इंटरैक्टिविटी के उन्नत फ़ीचर, तथा परिनियोजन और साझा करने के सर्वोत्तम अभ्यास शामिल हैं।
चलिए शुरू करते हैं।
हम एक वर्चुअल एनवायरनमेंट (संभव हो तो Conda) बनाकर शुरू करेंगे:
$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial
इसके बाद, आप PIP का उपयोग करके Gradio और उसकी निर्भरताएँ इंस्टॉल कर सकते हैं:
$ pip install gradio ipykernel
हमने ipykernel पैकेज भी इंस्टॉल किया है ताकि हम Jupyter नोटबुक्स के भीतर ही Gradio इंटरफ़ेस दिखा सकें। इसके लिए आपको बनाए गए वर्चुअल एनवायरनमेंट को Jupyter Lab में एक कर्नेल के रूप में जोड़ना होगा। इसे करने का कमांड यह है:
$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab # Start the lab
इससे आप ऐसा नोटबुक बना पाएंगे जिसका कर्नेल Gradio के साथ इंस्टॉल हो। सत्यापित करने के लिए, इसे मानक उपनाम से इम्पोर्ट करें और इसका संस्करण प्रिंट करें:
import gradio as gr
print(gr.__version__)
4.37.1
हम एक “Hello World” उदाहरण के ज़रिए Gradio की प्रमुख अवधारणाएँ और शब्दावली सीखेंगे:
def greet(name):
return f"Hello, {name}!"
demo = gr.Interface(
fn=greet,
inputs=['text'],
outputs="text",
)
demo.launch()
जब आप ऊपर दिया गया कोड एक सेल में चलाते हैं, तो आउटपुट एक छोटा इंटरैक्टिव इंटरफ़ेस होगा जो कस्टम अभिवादन संदेश लौटाता है:

Gradio कुछ प्रमुख अवधारणाओं के इर्द-गिर्द काम करता है:
ऊपर, हमने एक greet फ़ंक्शन बनाया जो टेक्स्ट इनपुट लेता और वापस करता है। इसी कारण, इनपुट और आउटपुट कॉम्पोनेंट्स को text के रूप में Interface क्लास के अंदर निर्दिष्ट किया गया है।
अंत में, हम launch मेथड को कॉल कर रहे हैं, जो एक लोकल सर्वर शुरू करता है। UI को सभी के लिए उपलब्ध कराने हेतु, आप share पैरामीटर को True पर सेट कर सकते हैं। यह एक SSH टनल शुरू करेगा और Gradio ऐप को सार्वजनिक रूप से साझा करने योग्य वेबपेज पर डिप्लॉय करेगा:
demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)
Gradio ऐप बनाते समय आप ज्यादातर समय विभिन्न कॉम्पोनेंट्स और उन्हें पेज पर कैसे रखा जाए, इसी पर काम करेंगे। तो आइए देखते हैं कि आपके पास क्या-क्या विकल्प हैं।
Gradio इंटरैक्टिव इंटरफ़ेस बनाने के लिए कॉम्पोनेंट्स की एक विस्तृत श्रृंखला प्रदान करता है। ये कॉम्पोनेंट्स आम तौर पर दो श्रेणियों में बँटे होते हैं: इनपुट और आउटपुट।
इनपुट कॉम्पोनेंट्स उपयोगकर्ताओं को अंतर्निहित प्रोसेसर (यह कोई भी Python फ़ंक्शन हो सकता है) को डेटा देने की अनुमति देते हैं। कुछ सामान्य इनपुट हैं:
यहाँ एक डमी इंटरफ़ेस है जो ऊपर के कुछ कॉम्पोनेंट्स का उपयोग करता है:
def process_inputs(text, image, audio, number, option):
# Process inputs and return results
return f"Processed: {text}, {number}, {option}"
demo = gr.Interface(
fn=process_inputs,
inputs=[
gr.Textbox(label="Enter text"),
gr.Image(label="Upload image"),
gr.Audio(label="Upload audio"), # Uncomment this line to add audio input
gr.Slider(0, 100, label="Choose a number"),
gr.Dropdown(["Streamlit", "Taipy", "Gradio"], label="Select a UI library"),
],
outputs="text",
)
demo.launch()
इस उदाहरण में, process_inputs फ़ंक्शन पाँच पैरामीटर लेता है। इसलिए, हमें पाँच इनपुट कॉम्पोनेंट्स बनाने होंगे और उन्हें inputs में पास करना होगा। हालाँकि इनपुट कॉम्पोनेंट्स की संख्या का फ़ंक्शन के आवश्यक पैरामीटर्स की संख्या से मेल खाना चाहिए, यह सख्त नियम नहीं है। त्रुटियों और चेतावनियों से बचने के लिए, ऐसे पैरामीटर्स के लिए डिफ़ॉल्ट मान सेट करें जिनके लिए UI से उपयोगकर्ता इनपुट आवश्यक नहीं है।

ध्यान दें कि हम पहले उदाहरण की तरह सादा स्ट्रिंग text के बजाय इनपुट कॉम्पोनेंट बताने के लिए Textbox क्लास का उपयोग कर रहे हैं। इनपुट और आउटपुट कॉम्पोनेंट्स निर्दिष्ट करने के लिए हमेशा समर्पित क्लासेज़ का उपयोग करना बेहतर है ताकि उन्हें अनुकूलित किया जा सके। उदाहरण के लिए, सभी कॉम्पोनेंट क्लासेज़ में उपयोगी label एट्रिब्यूट होता है, जबकि Slider और Dropdown में रेंज और उपलब्ध विकल्प निर्दिष्ट करने के तर्क होते हैं।
कई इनपुट कॉम्पोनेंट्स को आउटपुट दिखाने के लिए भी उपयोग किया जा सकता है। कुछ सामान्य परिदृश्य ये हैं:
इनपुट की तरह, आउटपुट कॉम्पोनेंट्स की संख्या भी प्रोसेसिंग फ़ंक्शन से लौटाए गए मानों की संख्या से मेल खानी चाहिए।
Gradio आपको अपनी आवश्यकता के अनुसार कॉम्पोनेंट्स की उपस्थिति अनुकूलित करने देता है। यहाँ कस्टमाइज़्ड टेक्स्ट बॉक्स का उपयोग करने वाला एक उदाहरण है:
demo = gr.Interface(
fn=lambda x: int(x) ** 7,
inputs=gr.Textbox(
lines=5,
placeholder="Enter any number...",
label="Custom textbox",
info="This is a customized textbox component to raise any number to the power of 7.",
),
outputs=gr.Textbox(label="And the number is...", show_copy_button=True),
)
demo.launch()

इस उदाहरण में, हमने Textbox कॉम्पोनेंट्स को लाइनों की संख्या बताकर, प्लेसहोल्डर और जानकारी वाला टेक्स्ट जोड़कर, और आउटपुट के लिए कॉपी बटन शामिल करके कस्टमाइज़ किया है।
विभिन्न कॉम्पोनेंट्स और उनकी प्रॉपर्टीज़ के साथ प्रयोग करें ताकि आप अपने AI अनुप्रयोग की आवश्यकताओं के अनुरूप इंटरफ़ेस बना सकें। यह जानने के लिए कि किसी कॉम्पोनेंट के लिए आप कौन-कौन सी प्रॉपर्टीज़ बदल सकते हैं, आप उसके डॉक्युमेंट्स देख सकते हैं, या बेहतर यह कि उसके क्लास नाम के बाद Jupyter Lab में ? ऑपरेन्ड का उपयोग करें:

अब तक सीखी बातों को समेटते हुए, हम LLMs द्वारा संचालित दो वास्तविक दुनिया के टेक्स्ट और इमेज-आधारित इंटरफ़ेस बनाएँगे।
पहले, हम अंग्रेज़ी से Turkish, Spanish या Chinese में भाषा अनुवादक बनाएँगे:
import openai # pip install openai
def translate_text(api_key, text, target_language):
openai.api_key = api_key # Set openai API key
language_map = {
"Turkish": "Turkish",
"Spanish": "Spanish",
"Chinese": "Chinese (Simplified)",
}
prompt = f"Translate the following English text to {language_map[target_language]}:\n\nEnglish: {text}\n\n{target_language} translation:"
try:
response = openai.chat.completions.create(
model="gpt-4",
messages=[
{"role": "system", "content": "You are a professional translator."},
{"role": "user", "content": prompt},
],
)
translation = response.choices[0].message.content.strip()
return translation
except Exception as e:
return f"Error: {str(e)}"
शुरुआत में हम translate_text फ़ंक्शन परिभाषित करते हैं। इसके भीतर हम OpenAI API कुंजी सेट करते हैं और एक भाषा मैप बनाते हैं। फिर हम अनुवाद के लिए प्रॉम्प्ट बनाते हैं। उसके बाद, एक try-except ब्लॉक के भीतर, हम सिस्टम प्रॉम्प्ट के साथ ChatCompletion एंडपॉइंट को एक अनुरोध भेजते हैं। अंत में, हम पहली पसंद लौटाते हैं।
अब, हम इंटरफ़ेस बना सकते हैं:
iface = gr.Interface(
fn=translate_text,
inputs=[
gr.Textbox(
placeholder="Enter your OpenAI API key",
type="password",
label="OpenAI API Key",
),
gr.Textbox(
lines=4,
placeholder="Enter English text to translate...",
label="English Text",
),
gr.Dropdown(choices=["Turkish", "Spanish", "Chinese"], label="Target Language"),
],
outputs=gr.Textbox(label="Translation", show_copy_button=True),
title="English to Turkish/Spanish/Chinese Translator",
description="Translate English text to Turkish, Spanish, or Chinese using OpenAI's GPT-4 model. Enter your OpenAI API key, the text you want to translate, and select the target language.",
)
iface.launch(share=True)
कोड पहले के इंटरफ़ेस जैसा ही सरल है, लेकिन हम कुछ नए गुण पेश कर रहे हैं:
परिणाम इस प्रकार है:

आप सोच सकते हैं कि हम उपयोगकर्ता की API कुंजी ऐप का हिस्सा बनकर क्यों माँग रहे हैं, बजाय इसे स्वयं प्रदान करने के। इसका कारण Gradio के UI परिनियोजन के तरीके से संबंधित है।
यदि हम अपनी API कुंजी को एक एनवायरनमेंट वेरिएबल के रूप में प्रदान करते (जो मानक प्रथा है), तो सार्वजनिक रूप से साझा करने योग्य ऐप संस्करण काम नहीं करता क्योंकि उसे हमारे एनवायरनमेंट वेरिएबल्स तक पहुँच नहीं होती। परिनियोजन अनुभाग में, हम देखेंगे कि HuggingFace Spaces पर तैनाती करके इसे कैसे ठीक किया जा सकता है।
आइए एक और UI बनाते हैं जो छवियाँ जनरेट करता है:
def generate_surrealist_art(api_key, prompt):
surrealist_prompt = f"Create a surrealist artwork based on the following concept: {prompt}. The artwork should be dreamlike, with unexpected juxtapositions and a sense of the uncanny."
client = OpenAI(api_key=api_key)
response = client.images.generate(
model="dall-e-3",
prompt=surrealist_prompt,
size="1024x1024",
)
image_url = response.data[0].url
return image_url
हमने generate_surrealist_art नामक फ़ंक्शन बनाया जो dall-e-3 को अनुरोध भेजता है और एक सुर्रियलिस्ट प्रॉम्प्ट का उपयोग करके जनित छवि का URL लौटाता है। फिर हम इस फ़ंक्शन को दोबारा Interface क्लास में फ़ीड करेंगे:
iface = gr.Interface(
fn=generate_surrealist_art,
inputs=[
gr.Textbox(
placeholder="Enter your OpenAI API key",
type="password",
label="OpenAI API Key",
),
gr.Textbox(
lines=2,
placeholder="Describe your surrealist concept...",
label="Concept Description",
),
],
outputs=gr.Image(value="str"),
title="Surrealist Artwork Generator",
description="Generate surrealist artwork based on your prompts using DALL-E. Enter your OpenAI API key and describe your concept.",
)
iface.launch(share=True)
हमने API कुंजी और उस कॉन्सेप्ट के लिए दो इनपुट निर्दिष्ट किए हैं जिसे हम सुर्रियलिस्ट छवि में पकड़ना चाहते हैं। फिर, हमने जनित छवि को दिखाने के लिए Image क्लास से एक आउटपुट कॉम्पोनेंट बनाया। यदि आप इसके value आर्ग्यूमेंट को str पर सेट करते हैं, तो कॉम्पोनेंट URLs से छवियाँ डाउनलोड और प्रदर्शित कर सकता है, जो हमें चाहिए।
और यह रहा परिणाम:

अब, आइए एक क्लासिक टैबुलर रिग्रेशन मॉडल के लिए इंटरफ़ेस बनाते हैं। हम Seaborn में उपलब्ध Diamonds डेटासेट का उपयोग करेंगे।
एक नया वर्किंग डायरेक्टरी बनाएँ और उसके अंदर app.py नामक एक नया स्क्रिप्ट बनाएं। फिर, डेटा लोड करने, Scikit-learn की Pipeline का उपयोग करके उसे प्रोसेस करने और RandomForestRegression मॉडल ट्रेन करने वाला कोड इस GitHub gist से पेस्ट करें।

अगला कदम एक प्रोसेसिंग फ़ंक्शन बनाना है जो Diamonds डेटासेट की विशेषताओं (features) जितने ही इनपुट स्वीकार करता हो:
# Create the Gradio interface
def predict_price(carat, cut, color, clarity, depth, table, x, y, z):
input_data = pd.DataFrame(
{
"carat": [carat],
"cut": [cut],
"color": [color],
"clarity": [clarity],
"depth": [depth],
"table": [table],
"x": [x],
"y": [y],
"z": [z],
}
)
prediction = model.predict(input_data)[0]
return f"Predicted Price: ${prediction:.2f}"
यह फ़ंक्शन उन इनपुट्स को DataFrame में बदलता है और प्रशिक्षित मॉडल पाइपलाइन की .predict() मेथड को पास करता है। अंत में, यह अनुमानित कीमत के साथ एक स्ट्रिंग लौटाता है।
अब, Interface क्लास को इस फ़ंक्शन के सिग्नेचर से मेल खाना होगा: विशेषताओं को प्रोसेस करने के लिए नौ इनपुट कॉम्पोनेंट्स और अनुमानित कीमत दिखाने के लिए एक आउटपुट:
iface = gr.Interface(
fn=predict_price,
inputs=[
gr.Slider(
minimum=diamonds["carat"].min(),
maximum=diamonds["carat"].max(),
label="Carat",
),
gr.Dropdown(["Fair", "Good", "Very Good", "Premium", "Ideal"], label="Cut"),
gr.Dropdown(["D", "E", "F", "G", "H", "I", "J"], label="Color"),
gr.Dropdown(
["I1", "SI2", "SI1", "VS2", "VS1", "VVS2", "VVS1", "IF"], label="Clarity"
),
gr.Slider(
minimum=diamonds["depth"].min(),
maximum=diamonds["depth"].max(),
label="Depth",
),
gr.Slider(
minimum=diamonds["table"].min(),
maximum=diamonds["table"].max(),
label="Table",
),
gr.Slider(minimum=diamonds["x"].min(), maximum=diamonds["x"].max(), label="X"),
gr.Slider(minimum=diamonds["y"].min(), maximum=diamonds["y"].max(), label="Y"),
gr.Slider(minimum=diamonds["z"].min(), maximum=diamonds["z"].max(), label="Z"),
],
outputs="text",
title="Diamond Price Predictor",
description="Enter the characteristics of a diamond to predict its price.",
)
iface.launch(share=True)
क्लास के अंदर, हम श्रेणीबद्ध विशेषताओं के लिए तीन ड्रॉपडाउन बनाते हैं। विकल्पों को प्रत्येक फ़ीचर की अद्वितीय श्रेणियों से भरा गया है। हम संख्यात्मक फ़ीचर्स के लिए छह स्लाइडर कॉम्पोनेंट भी बनाते हैं। स्लाइडर्स की रेंज प्रत्येक फ़ीचर के न्यूनतम और अधिकतम मानों से निर्धारित होती है।
अब बस स्क्रिप्ट चलाकर ऐप को रन और डिप्लॉय करें:
$ python app.py
परिणाम यह है:

सर्वोत्तम प्रथाओं और अनुकूलन सुझावों के लिए, नीचे दिए गए Best Practices अनुभाग पर जाएँ।
हमने पहले ही देखा है कि एक ही आर्ग्यूमेंट सक्षम करके Gradio ऐप्स को तैनात करना कितना आसान है। बेशक, इस विधि का नुकसान यह है कि डेमो 72 घंटे के भीतर समाप्त हो जाते हैं। इसलिए, Gradio को तैनात करने की अनुशंसित विधि HuggingFace Spaces के माध्यम से है। HuggingFace ने 2021 में Gradio का अधिग्रहण किया था, जिससे दोनों प्लेटफ़ॉर्म के बीच एकीकरण सहज हो गया है।
इस ट्यूटोरियल या Gradio के साथ बनाए गए भविष्य के किसी भी ऐप के लिए, huggingface.co पर एक मुफ़्त खाता बनाएँ और Settings > Tokens पर जाकर एक एक्सेस टोकन जनरेट करें:

टोकन केवल एक बार दिखाया जाता है, इसलिए इसे सुरक्षित रूप से कहीं सहेज लें।
इस टोकन के साथ, आप Spaces पर स्थायी होस्टिंग के साथ जितने चाहें उतने Gradio ऐप्स डिप्लॉय कर सकते हैं। उदाहरण के तौर पर, हम पिछले सेक्शन के Diamond Prices Prediction मॉडल को डिप्लॉय करेंगे, और यह आपको आश्चर्यजनक रूप से आसान लगेगा।
आपको बस UI स्क्रिप्ट वाली डायरेक्टरी पर जाना है और टर्मिनल पर gradio deploy कॉल करना है:

टर्मिनल आपको आपके स्क्रिप्ट को कार्यशील HuggingFace Space में बदलने की प्रक्रिया से गुज़ारता है। यह निम्नलिखित विवरण पूछता है:
और टर्मिनल आपको डिप्लॉय किए गए Space का लिंक देता है। यह कुछ ऐसा दिखता है:

इस परिनियोजन विधि की एक और ख़ूबी यह है कि Gradio स्वचालित रूप से डेमो को एक कार्यशील REST API में बदल देता है। इसे एक्सेस और क्वेरी करने के निर्देश हमेशा सबसे नीचे होते हैं:

तो, एक ही बार में, आपके पास गैर-तकनीकी उपयोगकर्ताओं के लिए आपके अनुप्रयोग का स्थायी UI होस्टिंग और आपके सहकर्मियों व डेवलपर मित्रों के लिए REST API — दोनों उपलब्ध हैं।
अधिक परिनियोजन और साझा करने के विकल्पों के लिए, जैसे वेबपेज में डेमो एम्बेड करना, ऐप्स में Google प्रमाणीकरण जोड़ना, आदि, Gradio के “Sharing Your App” अनुभाग पर जाएँ।
Gradio के साथ यूज़र इंटरफ़ेस विकसित करते समय, सर्वोत्तम प्रथाओं का पालन करने से उपयोगकर्ता अनुभव और आपके अनुप्रयोग की अनुरक्षणीयता में उल्लेखनीय सुधार हो सकता है। यहाँ कुछ प्रमुख सिफ़ारिशें हैं:
बेहतर वर्शन नियंत्रण, सहयोग और परिनियोजन के लिए Gradio अनुप्रयोगों को Python स्क्रिप्ट्स में व्यवस्थित करें।
संतुलित, रेस्पॉन्सिव इंटरफ़ेस सुनिश्चित करने के लिए उपयुक्त आकार और लेआउट टूल्स (जैसे, gr.Column(), gr.Row()) का उपयोग करें।
प्रत्येक कॉम्पोनेंट के लिए स्पष्ट निर्देश और संदर्भ देने हेतु ‘info’ और ‘label’ एट्रिब्यूट्स का उपयोग करें।
अनेक फ़ीचर्स वाले मॉडलों के लिए, बैच भविष्यवाणी सक्षम करने और इंटरफ़ेस को सरल रखने हेतु फ़ाइल इनपुट (CSV, JSON) का उपयोग करें।
लोकल विकास के लिए python-dotenv का उपयोग करें और परिनियोजन के लिए Hugging Face Spaces में वेरिएबल्स सेट करें।
इनपुट्स को मान्य करें, स्पष्ट त्रुटि संदेश दें, और सहज त्रुटि प्रबंधन के लिए try-except ब्लॉक्स का उपयोग करें।
कैशिंग लागू करें, बड़े मॉडलों के लिए लेज़ी लोडिंग करें, और लंबी अवधि के कार्यों के लिए gr.LoadingStatus() का उपयोग करें।
उच्च कंट्रास्ट सुनिश्चित करें, छवियों के लिए alt टेक्स्ट दें, और सभी इंटरैक्टिव तत्वों के लिए कीबोर्ड नेविगेशन सक्षम करें।
जटिल इंटरफ़ेस को व्यवस्थित करने के लिए एकॉर्डियन या टैब्स का उपयोग करें, और ज़रूरत पड़ने पर उन्नत विकल्प दिखाएँ।
निर्भरताएँ अद्यतन रखें, बग्स की निगरानी करें, और उपयोगकर्ता फ़ीडबैक के आधार पर निरंतर सुधार करें।
Gradio के साथ निर्बाध एकीकरण के लिए HuggingFace के टूल्स और संसाधनों का उपयोग करें, जिनमें मॉडल रिपॉज़िटरी और डेटासेट शामिल हैं।
बड़े टैबुलर मॉडलों के लिए, उन्हें HuggingFace Hub पर अपलोड करें और अपने Gradio स्क्रिप्ट में सीधे लोड करें, ताकि प्रदर्शन बेहतर हो और लोकल स्टोरेज आवश्यकताएँ कम हों।
बड़े डेटासेट्स के लिए, उन्हें HuggingFace Hub पर अपलोड करें और अपने Gradio अनुप्रयोग में सीधे एक्सेस करें, ताकि डेटा प्रबंधन सुव्यवस्थित हो और लोडिंग समय बेहतर हो।
इस लेख में, हमने Gradio का उपयोग करके AI अनुप्रयोगों के लिए यूज़र इंटरफ़ेस बनाना सीखा। हमने अभी सतह को ही छुआ है, क्योंकि Gradio जटिल इंटरफ़ेस बनाने के लिए कई और फ़ीचर्स प्रदान करता है। उदाहरण के लिए, interface state आपके ऐप को एक फ़ंक्शन कॉल से दूसरी तक आउटपुट याद रखने देता है। Reactive interfaces उपयोगकर्ता इनपुट बदलते ही UI को गतिशील रूप से बदल देती हैं। Blocks के साथ, आप कस्टम लेआउट और डिज़ाइनों वाले ऐप बना सकते हैं।
इसी तरह, अधिक सामग्री के लिए ये संबंधित संसाधन देखें:
शीर्ष DataCamp कोर्स
{count, plural, one {कोर्स} other {कोर्स}}
{count, plural, one {लर्निंग पाथ} other {लर्निंग पाथ}}
{count, plural, one {कोर्स} other {कोर्स}}