šŸ“ Artikel ini ditulis dalam Bahasa Indonesia & English
šŸ“ This article is available in English & Bahasa Indonesia

šŸš€ Belajar Hugging Face — Page 7Learn Hugging Face — Page 7

Hugging Face Spaces
Gradio & Demo Apps

Hugging Face Spaces
Gradio & Demo Apps

Deploy model ML Anda sebagai web app dalam 5 menit — gratis! Page 7 membahas: Gradio library untuk membuat UI interaktif tanpa HTML/CSS/JS, komponen Gradio (Textbox, Image, Audio, Chatbot, DataFrame, dll), membangun demo app untuk setiap model dari Page 2-6 (sentiment, NER, QA, generation, search), deploy ke HF Spaces (URL publik gratis!), Gradio Blocks API untuk layout custom, Streamlit sebagai alternatif, Gradio Chatbot interface untuk chatbot interaktif, API endpoint otomatis dari Gradio app, sharing dan embedding Spaces di website Anda, dan proyek lengkap: RAG chatbot app dengan Gradio.

Deploy your ML model as a web app in 5 minutes — free! Page 7 covers: Gradio library for building interactive UI without HTML/CSS/JS, Gradio components (Textbox, Image, Audio, Chatbot, DataFrame, etc.), building demo apps for every model from Pages 2-6 (sentiment, NER, QA, generation, search), deploying to HF Spaces (free public URL!), Gradio Blocks API for custom layouts, Streamlit as an alternative, Gradio Chatbot interface for interactive chatbots, automatic API endpoints from Gradio apps, sharing and embedding Spaces in your website, and complete project: RAG chatbot app with Gradio.

šŸ“… MaretMarch 2026ā± 38 menit baca38 min read
šŸ· GradioSpacesDemo AppsChatbot UIBlocks APIDeploymentStreamlitRAG App
šŸ“š Seri Belajar Hugging Face:Learn Hugging Face Series:

šŸ“‘ Daftar Isi — Page 7

šŸ“‘ Table of Contents — Page 7

  1. Kenapa Gradio? — UI interaktif tanpa frontend skills
  2. Gradio Interface — 3 baris kode = web app
  3. Komponen Gradio — Textbox, Image, Audio, Slider, dll
  4. Demo: Sentiment Analyzer — App dari model Page 2
  5. Demo: NER Highlighter — App dari model Page 4
  6. Demo: Text Generator — App dari model Page 3
  7. Demo: Semantic Search — App dari model Page 6
  8. Gradio Blocks — Layout custom, tabs, advanced UI
  9. Gradio ChatInterface — Chatbot UI seperti ChatGPT
  10. Deploy ke HF Spaces — URL publik gratis dalam 5 menit
  11. Proyek: RAG Chatbot App — Search + LLM + Gradio
  12. Ringkasan & Preview Page 8
  1. Why Gradio? — Interactive UI without frontend skills
  2. Gradio Interface — 3 lines of code = web app
  3. Gradio Components — Textbox, Image, Audio, Slider, etc
  4. Demo: Sentiment Analyzer — App from Page 2 model
  5. Demo: NER Highlighter — App from Page 4 model
  6. Demo: Text Generator — App from Page 3 model
  7. Demo: Semantic Search — App from Page 6 model
  8. Gradio Blocks — Custom layout, tabs, advanced UI
  9. Gradio ChatInterface — ChatGPT-like chatbot UI
  10. Deploy to HF Spaces — Free public URL in 5 minutes
  11. Project: RAG Chatbot App — Search + LLM + Gradio
  12. Summary & Page 8 Preview
šŸ¤”

1. Kenapa Gradio? — UI Interaktif Tanpa Frontend Skills

1. Why Gradio? — Interactive UI Without Frontend Skills

Tidak perlu HTML, CSS, JavaScript — Python saja cukup untuk membuat web app ML
No HTML, CSS, JavaScript needed — Python alone is enough to build ML web apps

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.

Gradio — Dari Notebook ke Web App dalam 3 Baris SEBELUM Gradio: ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” │ Jupyter Notebook │ │ model.predict("I love this movie") │ │ → [{'label': 'POSITIVE', 'score': 0.99}] │ │ │ │ āŒ Hanya ANDA yang bisa pakai │ │ āŒ Harus buka notebook │ │ āŒ Harus tahu Python │ ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ SESUDAH Gradio: ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” │ 🌐 Web App (username.hf.space) │ │ ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” │ │ │ šŸ“ Enter your text: │ │ │ │ [I love this movie! ] │ │ │ │ │ │ │ │ [šŸš€ Analyze Sentiment] │ │ │ │ │ │ │ │ šŸ“Š Result: POSITIVE (99.8%) │ │ │ ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ │ │ │ │ āœ… Siapa pun bisa pakai (URL publik) │ │ āœ… Tidak perlu install apapun │ │ āœ… Buka di browser HP/laptop │ │ āœ… API endpoint otomatis! │ ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜
FrameworkBahasaSetupML IntegrationBest For
GradioPython only3 baris kode⭐⭐⭐⭐⭐ (built for ML)ML demos, HF Spaces ⭐
StreamlitPython only10-20 baris⭐⭐⭐⭐ (good)Data dashboards, apps
Flask/FastAPIPython + HTML50+ baris⭐⭐⭐ (manual)Production APIs
React + APIJS + Python200+ baris⭐⭐ (full manual)Custom production UI
FrameworkLanguageSetupML IntegrationBest For
GradioPython only3 lines of code⭐⭐⭐⭐⭐ (built for ML)ML demos, HF Spaces ⭐
StreamlitPython only10-20 lines⭐⭐⭐⭐ (good)Data dashboards, apps
Flask/FastAPIPython + HTML50+ lines⭐⭐⭐ (manual)Production APIs
React + APIJS + Python200+ lines⭐⭐ (full manual)Custom production UI
⚔

2. Gradio Interface — 3 Baris Kode = Web App

2. Gradio Interface — 3 Lines of Code = Web App

gr.Interface(fn, inputs, outputs) — sesimpel itu
gr.Interface(fn, inputs, outputs) — that simple
52_gradio_basics.py — First Gradio Apppython
# 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

20+ komponen: dari textbox sampai 3D model viewer
20+ components: from textbox to 3D model viewer
KomponenTipeKodeUse Case
TextboxInput/Outputgr.Textbox(lines=3)Teks pendek/panjang
NumberInput/Outputgr.Number(label="Score")Angka
SliderInputgr.Slider(0, 1, value=0.7)Temperature, threshold
DropdownInputgr.Dropdown(["A","B"])Pilih model/opsi
CheckboxInputgr.Checkbox(label="GPU")Toggle fitur
ImageInput/Outputgr.Image(type="pil")Upload/display gambar
AudioInput/Outputgr.Audio(type="filepath")Record/play audio
VideoInput/Outputgr.Video()Upload/play video
FileInput/Outputgr.File()Upload/download file
DataFrameInput/Outputgr.DataFrame()Tabel data
LabelOutputgr.Label(num_top_classes=5)Classification results
HighlightedTextOutputgr.HighlightedText()NER visualization
JSONOutputgr.JSON()Structured data
ChatbotOutputgr.Chatbot()Chat conversation
ComponentTypeCodeUse Case
TextboxInput/Outputgr.Textbox(lines=3)Short/long text
NumberInput/Outputgr.Number(label="Score")Numbers
SliderInputgr.Slider(0, 1, value=0.7)Temperature, threshold
DropdownInputgr.Dropdown(["A","B"])Choose model/option
CheckboxInputgr.Checkbox(label="GPU")Toggle features
ImageInput/Outputgr.Image(type="pil")Upload/display images
AudioInput/Outputgr.Audio(type="filepath")Record/play audio
VideoInput/Outputgr.Video()Upload/play video
FileInput/Outputgr.File()Upload/download files
DataFrameInput/Outputgr.DataFrame()Data tables
LabelOutputgr.Label(num_top_classes=5)Classification results
HighlightedTextOutputgr.HighlightedText()NER visualization
JSONOutputgr.JSON()Structured data
ChatbotOutputgr.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

Copy-paste apps ini → langsung jadi portfolio ML Anda!
Copy-paste these apps → instant ML portfolio!
53_demo_sentiment.py — Sentiment Analyzer (Page 2 model)python
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()
54_demo_ner.py — NER Highlighter (Page 4 model)python
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()
55_demo_generation.py — Text Generator (Page 3 model)python
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()
56_demo_qa.py — Question Answering (Page 5 model)python
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

gr.Blocks() = full control atas layout. Multi-tab, sidebar, live update.
gr.Blocks() = full control over layout. Multi-tab, sidebar, live updates.
57_gradio_blocks.py — Advanced Multi-Tab App šŸ”„python
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

Built-in chat UI: message bubbles, history, streaming — dalam 5 baris kode
Built-in chat UI: message bubbles, history, streaming — in 5 lines of code
58_chatinterface.py — ChatBot UI šŸ”„python
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

Push ke HF → otomatis deploy → siapa pun bisa akses dari browser
Push to HF → auto-deploy → anyone can access from browser
Terminal — Deploy to HF Spaces (5 Minutes!)bash
# ===========================
# 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

Gabungkan Page 3 + 6 + 7: knowledge base search → LLM answer → chat UI
Combine Pages 3 + 6 + 7: knowledge base search → LLM answer → chat UI
59_rag_chatbot_app.py — RAG Chatbot with Gradio šŸ”„šŸ”„šŸ”„python
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

KonsepApa ItuKode Kunci
GradioUI web dari Pythonpip install gradio
gr.InterfaceSimple: fn + inputs + outputsgr.Interface(fn, inputs, outputs)
gr.BlocksCustom layout, tabswith gr.Blocks() as demo:
ChatInterfaceChatGPT-like UIgr.ChatInterface(fn=respond)
Components20+ input/output typesgr.Textbox, Image, Slider, Label
HF SpacesFree hosting for Gradio appshuggingface.co/new-space
share=TruePublic URL sementara (72h)demo.launch(share=True)
RAG AppSearch + LLM + Chat UIFAISS + FLAN-T5 + ChatInterface
ConceptWhat It IsKey Code
GradioWeb UI from Pythonpip install gradio
gr.InterfaceSimple: fn + inputs + outputsgr.Interface(fn, inputs, outputs)
gr.BlocksCustom layout, tabswith gr.Blocks() as demo:
ChatInterfaceChatGPT-like UIgr.ChatInterface(fn=respond)
Components20+ input/output typesgr.Textbox, Image, Slider, Label
HF SpacesFree hosting for Gradio appshuggingface.co/new-space
share=TrueTemporary public URL (72h)demo.launch(share=True)
RAG AppSearch + LLM + Chat UIFAISS + FLAN-T5 + ChatInterface
← Page Sebelumnya← Previous Page

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.