Python में Gradio के साथ AI अनुप्रयोगों के लिए यूज़र इंटरफ़ेस बनाना

आज के AI मॉडलों की उपयोगिता बिना सुगम यूज़र इंटरफ़ेस के काफी कम हो जाती है। Gradio, जो एक ओपन-सोर्स Python वेब UI लाइब्रेरी है, की मदद से आप LLMs और गैर-तकनीकी अंतिम उपयोगकर्ताओं के बीच की दूरी कम कर सकते हैं। यह आपको अपने AI प्रोजेक्ट्स के लिए तेज़ प्रोटोटाइप बनाने और उन्हें व्यापक दर्शकों तक सरलता से तैनात करने देता है।

यह ट्यूटोरियल उन मशीन लर्निंग इंजीनियरों के लिए है जिनके पास आमतौर पर वेब विकास का अनुभव नहीं होता। इसमें Gradio के मूल सिद्धांत और शब्दावली, विभिन्न AI मॉडल प्रकारों के लिए इंटरफ़ेस बनाना, UX और इंटरैक्टिविटी के उन्नत फ़ीचर, तथा परिनियोजन और साझा करने के सर्वोत्तम अभ्यास शामिल हैं।

चलिए शुरू करते हैं।

Gradio के साथ शुरुआत

इंस्टॉलेशन

हम एक वर्चुअल एनवायरनमेंट (संभव हो तो 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 कुछ प्रमुख अवधारणाओं के इर्द-गिर्द काम करता है:

1. Interface: UI बनाने के लिए कोर क्लास।
2. Components: इनपुट और आउटपुट तत्व, जैसे टेक्स्ट बॉक्स, छवियाँ और ऑडियो। अभी 30 से अधिक बिल्ट-इन कॉम्पोनेंट उपलब्ध हैं।
3. Functions: Python फ़ंक्शन जो इनपुट कॉम्पोनेंट्स से प्राप्त जानकारी को प्रोसेस करते हैं और आउटपुट कॉम्पोनेंट्स के साथ प्रदर्शित करने के लिए परिणाम लौटाते हैं।
4. 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 ऐप बनाते समय आप ज्यादातर समय विभिन्न कॉम्पोनेंट्स और उन्हें पेज पर कैसे रखा जाए, इसी पर काम करेंगे। तो आइए देखते हैं कि आपके पास क्या-क्या विकल्प हैं।

इनपुट और आउटपुट कॉम्पोनेंट्स

Gradio इंटरैक्टिव इंटरफ़ेस बनाने के लिए कॉम्पोनेंट्स की एक विस्तृत श्रृंखला प्रदान करता है। ये कॉम्पोनेंट्स आम तौर पर दो श्रेणियों में बँटे होते हैं: इनपुट और आउटपुट।

इनपुट कॉम्पोनेंट्स उपयोगकर्ताओं को अंतर्निहित प्रोसेसर (यह कोई भी Python फ़ंक्शन हो सकता है) को डेटा देने की अनुमति देते हैं। कुछ सामान्य इनपुट हैं:

• Textbox
• Image
• Audio
• Slider
• Dropdown

यहाँ एक डमी इंटरफ़ेस है जो ऊपर के कुछ कॉम्पोनेंट्स का उपयोग करता है:

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 में रेंज और उपलब्ध विकल्प निर्दिष्ट करने के तर्क होते हैं।

कई इनपुट कॉम्पोनेंट्स को आउटपुट दिखाने के लिए भी उपयोग किया जा सकता है। कुछ सामान्य परिदृश्य ये हैं:

• Label: टेक्स्ट या वर्गीकरण परिणाम प्रदर्शित करना
• Image: प्रोसेस की गई या जनित छवियाँ दिखाना
• Audio: प्रोसेस किया गया या जनित ऑडियो चलाना
• Plot: ग्राफ़ या चार्ट दिखाना

इनपुट की तरह, आउटपुट कॉम्पोनेंट्स की संख्या भी प्रोसेसिंग फ़ंक्शन से लौटाए गए मानों की संख्या से मेल खानी चाहिए।

कॉम्पोनेंट की उपस्थिति अनुकूलित करना

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 के लिए इंटरफ़ेस बनाना

अब तक सीखी बातों को समेटते हुए, हम 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)संचालित द्वारा

कोड पहले के इंटरफ़ेस जैसा ही सरल है, लेकिन हम कुछ नए गुण पेश कर रहे हैं:

• टेक्स्ट बॉक्स का type आर्ग्यूमेंट सादा टेक्स्ट इनपुट फ़ील्ड को पासवर्ड इनपुट में बदल देता है, जिससे टेक्स्ट छिप जाता है।
• Interface क्लास के title और description आर्ग्यूमेंट पेज के शीर्ष मध्य में H1 शीर्षक और उपशीर्षक जोड़ते हैं।

परिणाम इस प्रकार है:

आप सोच सकते हैं कि हम उपयोगकर्ता की 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 से छवियाँ डाउनलोड और प्रदर्शित कर सकता है, जो हमें चाहिए।

और यह रहा परिणाम:

क्लासिक ML मॉडलों के लिए इंटरफ़ेस बनाना

अब, आइए एक क्लासिक टैबुलर रिग्रेशन मॉडल के लिए इंटरफ़ेस बनाते हैं। हम 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 ऐप्स तैनात करना

हमने पहले ही देखा है कि एक ही आर्ग्यूमेंट सक्षम करके Gradio ऐप्स को तैनात करना कितना आसान है। बेशक, इस विधि का नुकसान यह है कि डेमो 72 घंटे के भीतर समाप्त हो जाते हैं। इसलिए, Gradio को तैनात करने की अनुशंसित विधि HuggingFace Spaces के माध्यम से है। HuggingFace ने 2021 में Gradio का अधिग्रहण किया था, जिससे दोनों प्लेटफ़ॉर्म के बीच एकीकरण सहज हो गया है।

इस ट्यूटोरियल या Gradio के साथ बनाए गए भविष्य के किसी भी ऐप के लिए, huggingface.co पर एक मुफ़्त खाता बनाएँ और Settings > Tokens पर जाकर एक एक्सेस टोकन जनरेट करें:

टोकन केवल एक बार दिखाया जाता है, इसलिए इसे सुरक्षित रूप से कहीं सहेज लें।

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

आपको बस UI स्क्रिप्ट वाली डायरेक्टरी पर जाना है और टर्मिनल पर gradio deploy कॉल करना है:

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

• आपके द्वारा जनरेट किया गया एक्सेस टोकन
• Space का शीर्षक: यह परिनियोजन के बाद Space URL का हिस्सा होगा
• Gradio UI कोड वाली स्क्रिप्ट का नाम (डिफ़ॉल्ट app.py)
• Space का हार्डवेयर; केवल CPU (मुफ़्त) उपयोग करने के लिए खाली छोड़ दें
• स्क्रिप्ट द्वारा उपयोग किए गए कोई भी एनवायरनमेंट वेरिएबल्स (यहीं पर आप API कुंजियाँ और उपयोगकर्ता रहस्य सुरक्षित रूप से रखते हैं)
• निर्भरताएँ — प्रत्येक को ENTER दबाकर एक-एक कर दर्ज करें

और टर्मिनल आपको डिप्लॉय किए गए Space का लिंक देता है। यह कुछ ऐसा दिखता है:

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

तो, एक ही बार में, आपके पास गैर-तकनीकी उपयोगकर्ताओं के लिए आपके अनुप्रयोग का स्थायी UI होस्टिंग और आपके सहकर्मियों व डेवलपर मित्रों के लिए REST API — दोनों उपलब्ध हैं।

अधिक परिनियोजन और साझा करने के विकल्पों के लिए, जैसे वेबपेज में डेमो एम्बेड करना, ऐप्स में Google प्रमाणीकरण जोड़ना, आदि, Gradio के “Sharing Your App” अनुभाग पर जाएँ।

Gradio सर्वोत्तम प्रथाएँ और सुझाव

Gradio के साथ यूज़र इंटरफ़ेस विकसित करते समय, सर्वोत्तम प्रथाओं का पालन करने से उपयोगकर्ता अनुभव और आपके अनुप्रयोग की अनुरक्षणीयता में उल्लेखनीय सुधार हो सकता है। यहाँ कुछ प्रमुख सिफ़ारिशें हैं:

1. संगठन और अनुरक्षणीयता के लिए स्क्रिप्ट्स का उपयोग करें

बेहतर वर्शन नियंत्रण, सहयोग और परिनियोजन के लिए Gradio अनुप्रयोगों को Python स्क्रिप्ट्स में व्यवस्थित करें।

2. कॉम्पोनेंट्स के लिए स्थान आवंटन का अनुकूलन करें

संतुलित, रेस्पॉन्सिव इंटरफ़ेस सुनिश्चित करने के लिए उपयुक्त आकार और लेआउट टूल्स (जैसे, gr.Column(), gr.Row()) का उपयोग करें।

3. व्यापक जानकारी प्रदान करें

प्रत्येक कॉम्पोनेंट के लिए स्पष्ट निर्देश और संदर्भ देने हेतु ‘info’ और ‘label’ एट्रिब्यूट्स का उपयोग करें।

4. बड़े फ़ीचर सेट को कुशलता से संभालें

अनेक फ़ीचर्स वाले मॉडलों के लिए, बैच भविष्यवाणी सक्षम करने और इंटरफ़ेस को सरल रखने हेतु फ़ाइल इनपुट (CSV, JSON) का उपयोग करें।

5. एनवायरनमेंट वेरिएबल्स का सही प्रबंधन करें

लोकल विकास के लिए python-dotenv का उपयोग करें और परिनियोजन के लिए Hugging Face Spaces में वेरिएबल्स सेट करें।

6. त्रुटि प्रबंधन और वैलिडेशन लागू करें

इनपुट्स को मान्य करें, स्पष्ट त्रुटि संदेश दें, और सहज त्रुटि प्रबंधन के लिए try-except ब्लॉक्स का उपयोग करें।

7. प्रदर्शन का अनुकूलन करें

कैशिंग लागू करें, बड़े मॉडलों के लिए लेज़ी लोडिंग करें, और लंबी अवधि के कार्यों के लिए gr.LoadingStatus() का उपयोग करें।

8. अभिगम्यता के लिए डिज़ाइन करें

उच्च कंट्रास्ट सुनिश्चित करें, छवियों के लिए alt टेक्स्ट दें, और सभी इंटरैक्टिव तत्वों के लिए कीबोर्ड नेविगेशन सक्षम करें।

9. प्रोग्रेसिव डिस्क्लोज़र लागू करें

जटिल इंटरफ़ेस को व्यवस्थित करने के लिए एकॉर्डियन या टैब्स का उपयोग करें, और ज़रूरत पड़ने पर उन्नत विकल्प दिखाएँ।

10. नियमित रूप से अपडेट और अनुरक्षण करें

निर्भरताएँ अद्यतन रखें, बग्स की निगरानी करें, और उपयोगकर्ता फ़ीडबैक के आधार पर निरंतर सुधार करें।

11. HuggingFace संसाधनों का लाभ उठाएँ

Gradio के साथ निर्बाध एकीकरण के लिए HuggingFace के टूल्स और संसाधनों का उपयोग करें, जिनमें मॉडल रिपॉज़िटरी और डेटासेट शामिल हैं।

12. बड़े मॉडलों को HuggingFace Hub पर होस्ट करें

बड़े टैबुलर मॉडलों के लिए, उन्हें HuggingFace Hub पर अपलोड करें और अपने Gradio स्क्रिप्ट में सीधे लोड करें, ताकि प्रदर्शन बेहतर हो और लोकल स्टोरेज आवश्यकताएँ कम हों।

13. HuggingFace डेटासेट्स का उपयोग करें

बड़े डेटासेट्स के लिए, उन्हें HuggingFace Hub पर अपलोड करें और अपने Gradio अनुप्रयोग में सीधे एक्सेस करें, ताकि डेटा प्रबंधन सुव्यवस्थित हो और लोडिंग समय बेहतर हो।

निष्कर्ष और आगे के संसाधन

इस लेख में, हमने Gradio का उपयोग करके AI अनुप्रयोगों के लिए यूज़र इंटरफ़ेस बनाना सीखा। हमने अभी सतह को ही छुआ है, क्योंकि Gradio जटिल इंटरफ़ेस बनाने के लिए कई और फ़ीचर्स प्रदान करता है। उदाहरण के लिए, interface state आपके ऐप को एक फ़ंक्शन कॉल से दूसरी तक आउटपुट याद रखने देता है। Reactive interfaces उपयोगकर्ता इनपुट बदलते ही UI को गतिशील रूप से बदल देती हैं। Blocks के साथ, आप कस्टम लेआउट और डिज़ाइनों वाले ऐप बना सकते हैं।

इसी तरह, अधिक सामग्री के लिए ये संबंधित संसाधन देखें:

• अपने डेटा साइंस स्टैक में जोड़ने के लिए 10 Python पैकेज
• उत्कृष्ट AI अनुप्रयोग बनाने के लिए 7 आवश्यक जनरेटिव AI टूल्स
• Gen AI मॉडलों के साथ आप जो 5 प्रोजेक्ट बना सकते हैं
• मशीन लर्निंग के लिए CI/CD कोर्स