š Daftar Isi ā Page 7
š Table of Contents ā Page 7
- Kenapa Gradio? ā UI interaktif tanpa frontend skills
- Gradio Interface ā 3 baris kode = web app
- Komponen Gradio ā Textbox, Image, Audio, Slider, dll
- Demo: Sentiment Analyzer ā App dari model Page 2
- Demo: NER Highlighter ā App dari model Page 4
- Demo: Text Generator ā App dari model Page 3
- Demo: Semantic Search ā App dari model Page 6
- Gradio Blocks ā Layout custom, tabs, advanced UI
- Gradio ChatInterface ā Chatbot UI seperti ChatGPT
- Deploy ke HF Spaces ā URL publik gratis dalam 5 menit
- Proyek: RAG Chatbot App ā Search + LLM + Gradio
- Ringkasan & Preview Page 8
- Why Gradio? ā Interactive UI without frontend skills
- Gradio Interface ā 3 lines of code = web app
- Gradio Components ā Textbox, Image, Audio, Slider, etc
- Demo: Sentiment Analyzer ā App from Page 2 model
- Demo: NER Highlighter ā App from Page 4 model
- Demo: Text Generator ā App from Page 3 model
- Demo: Semantic Search ā App from Page 6 model
- Gradio Blocks ā Custom layout, tabs, advanced UI
- Gradio ChatInterface ā ChatGPT-like chatbot UI
- Deploy to HF Spaces ā Free public URL in 5 minutes
- Project: RAG Chatbot App ā Search + LLM + Gradio
- Summary & Page 8 Preview
1. Kenapa Gradio? ā UI Interaktif Tanpa Frontend Skills
1. Why Gradio? ā Interactive UI Without Frontend Skills
Anda sudah bisa train model (Page 2-6). Tapi model di notebook tidak bisa dipakai orang lain. Gradio memungkinkan Anda membuat UI web interaktif hanya dengan Python ā dalam 3 baris kode. User bisa mengetik teks, upload gambar, atau bicara ā dan model Anda memberikan respons secara real-time.
You can now train models (Pages 2-6). But a model in a notebook can't be used by others. Gradio lets you create interactive web UIs using only Python ā in 3 lines of code. Users can type text, upload images, or speak ā and your model responds in real-time.
| Framework | Bahasa | Setup | ML Integration | Best For |
|---|---|---|---|---|
| Gradio | Python only | 3 baris kode | āāāāā (built for ML) | ML demos, HF Spaces ā |
| Streamlit | Python only | 10-20 baris | āāāā (good) | Data dashboards, apps |
| Flask/FastAPI | Python + HTML | 50+ baris | āāā (manual) | Production APIs |
| React + API | JS + Python | 200+ baris | āā (full manual) | Custom production UI |
| Framework | Language | Setup | ML Integration | Best For |
|---|---|---|---|---|
| Gradio | Python only | 3 lines of code | āāāāā (built for ML) | ML demos, HF Spaces ā |
| Streamlit | Python only | 10-20 lines | āāāā (good) | Data dashboards, apps |
| Flask/FastAPI | Python + HTML | 50+ lines | āāā (manual) | Production APIs |
| React + API | JS + Python | 200+ lines | āā (full manual) | Custom production UI |
2. Gradio Interface ā 3 Baris Kode = Web App
2. Gradio Interface ā 3 Lines of Code = Web App
# pip install gradio import gradio as gr # =========================== # 1. Minimal ā literally 3 lines! # =========================== def greet(name): return f"Hello, {name}! Welcome to Hugging Face š¤" demo = gr.Interface(fn=greet, inputs="text", outputs="text") demo.launch() # ā Opens http://127.0.0.1:7860 in browser! # ā Beautiful UI with textbox input, submit button, output area # ā Auto-generated API at /api/predict # =========================== # 2. With HF model ā sentiment analysis app! # =========================== from transformers import pipeline classifier = pipeline("sentiment-analysis") def analyze_sentiment(text): result = classifier(text)[0] return f"{result['label']} ({result['score']:.1%})" demo = gr.Interface( fn=analyze_sentiment, inputs=gr.Textbox(label="Enter text", placeholder="Type something...", lines=3), outputs=gr.Textbox(label="Sentiment"), title="š Sentiment Analyzer", description="Analyze the sentiment of any English text using DistilBERT.", examples=[ ["I absolutely love this product!"], ["This was the worst experience ever."], ["The movie was okay, nothing special."], ], theme=gr.themes.Soft(), # built-in themes: Default, Soft, Glass, Monochrome ) demo.launch(share=True) # share=True ā public URL (72 hours)! # ā "Running on public URL: https://xxxxx.gradio.live" # Share this URL with anyone! They can use your model from their phone!
š gr.Interface() ā 3 Parameter Wajib:
fn = Python function yang menerima input dan return output. Apa pun: model.predict, pandas transform, calculation.
inputs = tipe input UI. String shortcut: "text", "image", "audio". Atau komponen: gr.Textbox(), gr.Image().
outputs = tipe output UI. Sama seperti inputs.
Bonus: examples = contoh input yang bisa diklik user. title/description = teks di atas app.
š gr.Interface() ā 3 Required Parameters:
fn = Python function that takes input and returns output. Anything: model.predict, pandas transform, calculation.
inputs = input UI type. String shortcuts: "text", "image", "audio". Or components: gr.Textbox(), gr.Image().
outputs = output UI type. Same as inputs.
Bonus: examples = clickable example inputs. title/description = text above app.
3. Komponen Gradio ā Input & Output yang Tersedia
3. Gradio Components ā Available Inputs & Outputs
| Komponen | Tipe | Kode | Use Case |
|---|---|---|---|
| Textbox | Input/Output | gr.Textbox(lines=3) | Teks pendek/panjang |
| Number | Input/Output | gr.Number(label="Score") | Angka |
| Slider | Input | gr.Slider(0, 1, value=0.7) | Temperature, threshold |
| Dropdown | Input | gr.Dropdown(["A","B"]) | Pilih model/opsi |
| Checkbox | Input | gr.Checkbox(label="GPU") | Toggle fitur |
| Image | Input/Output | gr.Image(type="pil") | Upload/display gambar |
| Audio | Input/Output | gr.Audio(type="filepath") | Record/play audio |
| Video | Input/Output | gr.Video() | Upload/play video |
| File | Input/Output | gr.File() | Upload/download file |
| DataFrame | Input/Output | gr.DataFrame() | Tabel data |
| Label | Output | gr.Label(num_top_classes=5) | Classification results |
| HighlightedText | Output | gr.HighlightedText() | NER visualization |
| JSON | Output | gr.JSON() | Structured data |
| Chatbot | Output | gr.Chatbot() | Chat conversation |
| Component | Type | Code | Use Case |
|---|---|---|---|
| Textbox | Input/Output | gr.Textbox(lines=3) | Short/long text |
| Number | Input/Output | gr.Number(label="Score") | Numbers |
| Slider | Input | gr.Slider(0, 1, value=0.7) | Temperature, threshold |
| Dropdown | Input | gr.Dropdown(["A","B"]) | Choose model/option |
| Checkbox | Input | gr.Checkbox(label="GPU") | Toggle features |
| Image | Input/Output | gr.Image(type="pil") | Upload/display images |
| Audio | Input/Output | gr.Audio(type="filepath") | Record/play audio |
| Video | Input/Output | gr.Video() | Upload/play video |
| File | Input/Output | gr.File() | Upload/download files |
| DataFrame | Input/Output | gr.DataFrame() | Data tables |
| Label | Output | gr.Label(num_top_classes=5) | Classification results |
| HighlightedText | Output | gr.HighlightedText() | NER visualization |
| JSON | Output | gr.JSON() | Structured data |
| Chatbot | Output | gr.Chatbot() | Chat conversation |
4-7. Demo Apps ā Satu App untuk Setiap Model dari Page 2-6
4-7. Demo Apps ā One App for Every Model from Pages 2-6
import gradio as gr from transformers import pipeline classifier = pipeline("sentiment-analysis") def analyze(text): result = classifier(text)[0] return {result["label"]: result["score"], "OPPOSITE": 1 - result["score"]} demo = gr.Interface( fn=analyze, inputs=gr.Textbox(label="Enter text", lines=3, placeholder="Type a review..."), outputs=gr.Label(num_top_classes=2, label="Sentiment"), title="š Sentiment Analyzer", examples=[["I love this!"], ["Terrible product."], ["It's okay."]], ) demo.launch()
import gradio as gr from transformers import pipeline ner = pipeline("ner", grouped_entities=True) def extract_entities(text): entities = ner(text) # Format for HighlightedText: list of (text, label) tuples highlights = [] last_end = 0 for e in entities: if e["start"] > last_end: highlights.append((text[last_end:e["start"]], None)) highlights.append((text[e["start"]:e["end"]], e["entity_group"])) last_end = e["end"] if last_end < len(text): highlights.append((text[last_end:], None)) return highlights demo = gr.Interface( fn=extract_entities, inputs=gr.Textbox(label="Text", lines=3, placeholder="Joko Widodo visited Google in California..."), outputs=gr.HighlightedText(label="Entities", color_map={"PER": "#ff6b6b", "ORG": "#4ecdc4", "LOC": "#45b7d1", "MISC": "#f9ca24"}), title="š·ļø Named Entity Recognition", examples=[["Elon Musk founded SpaceX in California."]], ) demo.launch()
import gradio as gr from transformers import pipeline generator = pipeline("text-generation", model="gpt2") def generate(prompt, temperature, max_tokens): result = generator(prompt, max_new_tokens=int(max_tokens), temperature=temperature, do_sample=True, top_p=0.9) return result[0]["generated_text"] demo = gr.Interface( fn=generate, inputs=[ gr.Textbox(label="Prompt", lines=2, placeholder="Once upon a time..."), gr.Slider(0.1, 2.0, value=0.7, step=0.1, label="Temperature"), gr.Slider(10, 200, value=50, step=10, label="Max Tokens"), ], outputs=gr.Textbox(label="Generated Text", lines=8), title="āļø GPT-2 Text Generator", examples=[["The future of AI is", 0.7, 80], ["Once upon a time", 0.9, 100]], ) demo.launch()
import gradio as gr from transformers import pipeline qa = pipeline("question-answering") def answer_question(context, question): result = qa(question=question, context=context) return f"**{result['answer']}** (confidence: {result['score']:.1%})" demo = gr.Interface( fn=answer_question, inputs=[ gr.Textbox(label="Context", lines=5, value="Indonesia is a country in Southeast Asia. Jakarta is the capital."), gr.Textbox(label="Question", placeholder="What is the capital?"), ], outputs=gr.Markdown(label="Answer"), title="ā Question Answering", ) demo.launch()
8. Gradio Blocks ā Layout Custom, Tabs, Advanced UI
8. Gradio Blocks ā Custom Layout, Tabs, Advanced UI
import gradio as gr from transformers import pipeline sentiment = pipeline("sentiment-analysis") ner_pipe = pipeline("ner", grouped_entities=True) generator = pipeline("text-generation", model="gpt2") with gr.Blocks(title="š¤ NLP Toolkit", theme=gr.themes.Soft()) as demo: gr.Markdown("# š¤ NLP Toolkit\nMultiple NLP tools in one app!") with gr.Tab("š Sentiment"): with gr.Row(): sent_input = gr.Textbox(label="Text", lines=3) sent_output = gr.Label(num_top_classes=2) sent_btn = gr.Button("Analyze", variant="primary") sent_btn.click(lambda t: {r["label"]: r["score"] for r in sentiment(t)}, sent_input, sent_output) with gr.Tab("š·ļø NER"): ner_input = gr.Textbox(label="Text", lines=3) ner_output = gr.JSON(label="Entities") ner_btn = gr.Button("Extract", variant="primary") ner_btn.click(lambda t: ner_pipe(t), ner_input, ner_output) with gr.Tab("āļø Generate"): with gr.Row(): gen_input = gr.Textbox(label="Prompt", lines=2, scale=3) gen_temp = gr.Slider(0.1, 2.0, value=0.7, label="Temp", scale=1) gen_output = gr.Textbox(label="Result", lines=6) gen_btn = gr.Button("Generate", variant="primary") gen_btn.click( lambda p, t: generator(p, max_new_tokens=80, temperature=t, do_sample=True)[0]["generated_text"], [gen_input, gen_temp], gen_output) demo.launch()
š gr.Interface vs gr.Blocks ā Kapan Pakai Mana?
gr.Interface: Simpel, 1 fungsi, 1 set input ā 1 set output. 80% kasus. ā Mulai dari sini
gr.Blocks: Custom layout, multi-tab, sidebar, event chaining, state management. 20% kasus. ā Untuk app kompleks
Rule: mulai dengan Interface. Pindah ke Blocks hanya saat butuh layout custom atau multiple features.
š gr.Interface vs gr.Blocks ā When to Use Which?
gr.Interface: Simple, 1 function, 1 set inputs ā 1 set outputs. 80% of cases. ā Start here
gr.Blocks: Custom layout, multi-tab, sidebar, event chaining, state management. 20% of cases. ā For complex apps
Rule: start with Interface. Switch to Blocks only when you need custom layout or multiple features.
9. Gradio ChatInterface ā Chatbot UI Seperti ChatGPT
9. Gradio ChatInterface ā ChatGPT-like Chatbot UI
import gradio as gr from transformers import pipeline generator = pipeline("text-generation", model="gpt2") # =========================== # 1. Basic ChatInterface # =========================== def respond(message, history): """ message: user's latest message (str) history: list of [user_msg, bot_msg] pairs """ # Build conversation context prompt = "" for user_msg, bot_msg in history[-3:]: # last 3 turns for context prompt += f"User: {user_msg}\nAssistant: {bot_msg}\n" prompt += f"User: {message}\nAssistant:" result = generator(prompt, max_new_tokens=100, do_sample=True, temperature=0.7, top_p=0.9, repetition_penalty=1.2) response = result[0]["generated_text"][len(prompt):] # Stop at next "User:" to prevent multi-turn generation if "User:" in response: response = response[:response.index("User:")] return response.strip() demo = gr.ChatInterface( fn=respond, title="š¤ GPT-2 Chatbot", description="Chat with GPT-2. (Small model ā limited quality, for demo purposes.)", examples=["What is machine learning?", "Tell me a joke", "Explain Python in one sentence"], retry_btn="š Retry", undo_btn="ā©ļø Undo", clear_btn="šļø Clear", ) demo.launch() # ā Beautiful ChatGPT-style UI with message bubbles! # ā History automatically maintained # ā Retry, Undo, Clear buttons built-in # =========================== # 2. Streaming ChatInterface (token-by-token like ChatGPT!) # =========================== def respond_streaming(message, history): # Use yield for streaming! prompt = f"User: {message}\nAssistant:" partial = "" # Simulate streaming (real streaming needs TextIteratorStreamer) result = generator(prompt, max_new_tokens=80, do_sample=True, temperature=0.7) text = result[0]["generated_text"][len(prompt):] for char in text: partial += char yield partial # ā yield for streaming! demo_stream = gr.ChatInterface(fn=respond_streaming, title="š¤ Streaming Chatbot") demo_stream.launch()
10. Deploy ke HF Spaces ā URL Publik Gratis dalam 5 Menit
10. Deploy to HF Spaces ā Free Public URL in 5 Minutes
# =========================== # Method 1: Melalui website (PALING MUDAH) # =========================== # 1. Buka huggingface.co/new-space # 2. Isi: Space name, License, SDK = "Gradio" # 3. Klik "Create Space" # 4. Upload 2 file: # - app.py (kode Gradio Anda) # - requirements.txt (dependencies) # 5. Otomatis build & deploy! # 6. URL: https://huggingface.co/spaces/USERNAME/SPACE_NAME # =========================== # Method 2: Melalui git (LEBIH BAIK untuk iterasi) # =========================== # 1. Create space di website # 2. Clone: git clone https://huggingface.co/spaces/USERNAME/my-sentiment-app cd my-sentiment-app # 3. Buat app.py: cat > app.py <<'EOF' import gradio as gr from transformers import pipeline classifier = pipeline("sentiment-analysis") def analyze(text): result = classifier(text)[0] return {result["label"]: result["score"]} demo = gr.Interface(fn=analyze, inputs="text", outputs=gr.Label(), title="š Sentiment Analyzer") demo.launch() EOF # 4. Buat requirements.txt: cat > requirements.txt <<'EOF' transformers torch gradio EOF # 5. Push! git add . && git commit -m "Initial deploy" && git push # ā Auto-build (~2-3 menit pertama kali) # ā Live di: https://USERNAME-my-sentiment-app.hf.space # =========================== # Pricing # =========================== # CPU basic: GRATIS! (2 vCPU, 16GB RAM) # CPU upgrade: $0.03/hr (8 vCPU, 32GB RAM) # GPU T4: $0.60/hr (for inference) # GPU A10G: $1.05/hr # GPU A100: $4.13/hr # # Untuk sentiment/NER/QA ā CPU GRATIS sudah cukup! # Untuk text generation ā perlu GPU
š 5 Menit dari Kode ke URL Publik!
1. Buka huggingface.co/new-space (30 detik)
2. Upload app.py + requirements.txt (1 menit)
3. Tunggu build (2-3 menit)
4. Selesai! URL publik: https://username-appname.hf.space
Share URL ini ke siapa pun ā mereka bisa pakai model Anda dari HP tanpa install apapun! Perfect untuk portfolio, demo ke atasan, atau sharing ke teman.
š 5 Minutes from Code to Public URL!
1. Go to huggingface.co/new-space (30 seconds)
2. Upload app.py + requirements.txt (1 minute)
3. Wait for build (2-3 minutes)
4. Done! Public URL: https://username-appname.hf.space
Share this URL with anyone ā they can use your model from their phone without installing anything! Perfect for portfolios, demos, or sharing.
11. Proyek: RAG Chatbot App ā Search + LLM + Gradio
11. Project: RAG Chatbot App ā Search + LLM + Gradio
import gradio as gr import faiss, numpy as np from sentence_transformers import SentenceTransformer from transformers import pipeline # =========================== # 1. Setup retriever + generator # =========================== retriever = SentenceTransformer("all-MiniLM-L6-v2") generator = pipeline("text2text-generation", model="google/flan-t5-small") # Knowledge base (replace with your own documents!) knowledge_base = [ "Jakarta is the capital of Indonesia with a population of 10.56 million.", "Indonesia declared independence on August 17, 1945.", "Python was created by Guido van Rossum and released in 1991.", "TensorFlow is an open-source ML framework developed by Google.", "Hugging Face provides the Transformers library for NLP tasks.", "BERT was published by Google in 2018 for bidirectional language understanding.", "Mount Bromo is an active volcano in East Java, standing at 2,329 meters.", "Bali is Indonesia's most popular tourist destination, known for temples.", ] # Build FAISS index kb_embeddings = retriever.encode(knowledge_base, convert_to_numpy=True) faiss.normalize_L2(kb_embeddings) index = faiss.IndexFlatIP(kb_embeddings.shape[1]) index.add(kb_embeddings) # =========================== # 2. RAG function # =========================== def rag_chat(message, history): # Retrieve relevant documents q_emb = retriever.encode([message], convert_to_numpy=True) faiss.normalize_L2(q_emb) scores, indices = index.search(q_emb, 2) context = " ".join([knowledge_base[i] for i in indices[0]]) # Generate answer prompt = f"Based on this context, answer the question.\nContext: {context}\nQuestion: {message}\nAnswer:" result = generator(prompt, max_length=150) answer = result[0]["generated_text"] # Add source info sources = "\n\nš Sources:\n" + "\n".join( [f"- {knowledge_base[i][:80]}..." for i in indices[0]]) return answer + sources # =========================== # 3. Gradio ChatInterface # =========================== demo = gr.ChatInterface( fn=rag_chat, title="š§© RAG Chatbot ā Knowledge-Grounded QA", description="Ask questions about Indonesia, Python, or AI. Answers grounded in a knowledge base!", examples=[ "What is the capital of Indonesia?", "When did Indonesia become independent?", "What is TensorFlow?", "Tell me about Mount Bromo", ], theme=gr.themes.Soft(), ) demo.launch() # ā RAG chatbot with knowledge-grounded answers! # ā Shows sources for each answer # ā Deploy to HF Spaces ā free public RAG chatbot!
12. Ringkasan Page 7
12. Page 7 Summary
| Konsep | Apa Itu | Kode Kunci |
|---|---|---|
| Gradio | UI web dari Python | pip install gradio |
| gr.Interface | Simple: fn + inputs + outputs | gr.Interface(fn, inputs, outputs) |
| gr.Blocks | Custom layout, tabs | with gr.Blocks() as demo: |
| ChatInterface | ChatGPT-like UI | gr.ChatInterface(fn=respond) |
| Components | 20+ input/output types | gr.Textbox, Image, Slider, Label |
| HF Spaces | Free hosting for Gradio apps | huggingface.co/new-space |
| share=True | Public URL sementara (72h) | demo.launch(share=True) |
| RAG App | Search + LLM + Chat UI | FAISS + FLAN-T5 + ChatInterface |
| Concept | What It Is | Key Code |
|---|---|---|
| Gradio | Web UI from Python | pip install gradio |
| gr.Interface | Simple: fn + inputs + outputs | gr.Interface(fn, inputs, outputs) |
| gr.Blocks | Custom layout, tabs | with gr.Blocks() as demo: |
| ChatInterface | ChatGPT-like UI | gr.ChatInterface(fn=respond) |
| Components | 20+ input/output types | gr.Textbox, Image, Slider, Label |
| HF Spaces | Free hosting for Gradio apps | huggingface.co/new-space |
| share=True | Temporary public URL (72h) | demo.launch(share=True) |
| RAG App | Search + LLM + Chat UI | FAISS + FLAN-T5 + ChatInterface |
Page 6 ā Sentence Embeddings & Semantic Search
Coming Next: Page 8 ā LoRA, QLoRA & Efficient Fine-Tuning
Fine-tune LLaMA 7B di Colab gratis! Page 8 membahas: kenapa full fine-tuning model besar tidak mungkin di consumer GPU, PEFT (Parameter-Efficient Fine-Tuning), LoRA (Low-Rank Adaptation) ā hanya train 0.1% parameters!, QLoRA (4-bit quantization + LoRA), fine-tune Mistral/LLaMA 7B pada custom dataset di Colab T4, dan merge LoRA weights ke base model.
Coming Next: Page 8 ā LoRA, QLoRA & Efficient Fine-Tuning
Fine-tune LLaMA 7B on free Colab! Page 8 covers: why full fine-tuning large models is impossible on consumer GPUs, PEFT (Parameter-Efficient Fine-Tuning), LoRA (Low-Rank Adaptation) ā only train 0.1% of parameters!, QLoRA (4-bit quantization + LoRA), fine-tuning Mistral/LLaMA 7B on custom datasets on Colab T4, and merging LoRA weights into the base model.