Streamlit AI Application Prototype: สร้าง Online Demo ภายใน 30 นาที

ผมเคยเจอสถานการณ์ที่ทำให้เหนื่อยมาก ตอนที่ต้องสร้าง prototype สำหรับ AI chatbot ให้ลูกค้าดู ผมใช้เวลาหลายวันกับการตั้งค่า Flask server, จัดการ CORS, และ deploy ขึ้น cloud แต่พอ demo จริง client ก็ยังต้องการแก้ไข UI อีก สุดท้ายก็ต้องนั่งแก้โค้ดใหม่ทั้งระบบ จนกระทั่งผมค้นพบว่า Streamlit สามารถแก้ปัญหานี้ได้หมดในเวลาเพียง 30 นาที

ทำไมต้องใช้ Streamlit สำหรับ AI Prototype

Streamlit เป็น open-source Python framework ที่ทำให้การสร้าง web application สำหรับ data science และ AI กลายเป็นเรื่องง่ายมาก คุณไม่จำเป็นต้องมีความรู้ด้าน HTML, CSS หรือ JavaScript ก็สามารถสร้าง interactive UI ได้ โดยเฉพาะเมื่อใช้ร่วมกับ HolySheep AI ซึ่งมีค่าใช้จ่ายต่ำมาก (อัตรา ¥1=$1 ประหยัดได้มากกว่า 85%) และ latency ต่ำกว่า 50ms ทำให้ prototype ของคุณทำงานได้อย่างรวดเร็ว

การติดตั้งและตั้งค่าโครงสร้างโปรเจกต์

ก่อนเริ่มต้น คุณต้องติดตั้ง dependencies ที่จำเป็น:

# สร้าง virtual environment แยกสำหรับโปรเจกต์
python -m venv streamlit-env

เปิดใช้งาน virtual environment
Windows
streamlit-env\Scripts\activate
macOS/Linux
source streamlit-env/bin/activate

ติดตั้ง packages ที่จำเป็น
pip install streamlit openai python-dotenv

จากนั้นสร้างไฟล์ .env สำหรับเก็บ API key อย่างปลอดภัย:

# ไฟล์ .env
HOLYSHEEP_API_KEY=YOUR_HOLYSHEEP_API_KEY
MODEL_NAME=gpt-4.1

สร้าง AI Chat Interface พื้นฐาน

ไฟล์หลัก app.py จะเป็นตัวอย่าง AI chatbot ที่เชื่อมต่อกับ HolySheep AI API:

import streamlit as st
import openai
import os
from dotenv import load_dotenv

โหลด environment variables
load_dotenv()

ตั้งค่า HolySheep AI เป็น base URL
openai.api_key = os.getenv("HOLYSHEEP_API_KEY")
openai.api_base = "https://api.holysheep.ai/v1"

ตั้งค่าหน้าจอ Streamlit
st.set_page_config(
    page_title="AI Chat Prototype",
    page_icon="🤖",
    layout="centered"
)

st.title("🤖 AI Chat Demo")
st.markdown("**ระบบนี้เชื่อมต่อกับ HolySheep AI — ราคาถูก รวดเร็ว ใช้งานง่าย**")

ตรวจสอบว่ามี chat history ใน session หรือไม่
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "คุณเป็นผู้ช่วย AI ที่เป็นมิตร"}
    ]

แสดงประวัติการสนทนา
for message in st.session_state.messages:
    if message["role"] != "system":
        with st.chat_message(message["role"]):
            st.markdown(message["content"])

รับ input จากผู้ใช้
if prompt := st.chat_input("พิมพ์ข้อความของคุณที่นี่..."):
    # เพิ่มข้อความผู้ใช้ลงใน session state
    st.session_state.messages.append({"role": "user", "content": prompt})
    
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # เรียกใช้ HolySheep AI API
    with st.chat_message("assistant"):
        with st.spinner("กำลังประมวลผล..."):
            try:
                response = openai.ChatCompletion.create(
                    model=os.getenv("MODEL_NAME", "gpt-4.1"),
                    messages=st.session_state.messages,
                    temperature=0.7,
                    max_tokens=1000
                )
                assistant_response = response.choices[0].message.content
                st.markdown(assistant_response)
                
                # บันทึก response ลงใน session state
                st.session_state.messages.append(
                    {"role": "assistant", "content": assistant_response}
                )
            except Exception as e:
                st.error(f"เกิดข้อผิดพลาด: {str(e)}")

เพิ่มปุ่ม clear chat
if st.button("🗑️ ล้างการสนทนา"):
    st.session_state.messages = [
        {"role": "system", "content": "คุณเป็นผู้ช่วย AI ที่เป็นมิตร"}
    ]
    st.rerun()

สร้าง Advanced AI Dashboard พร้อมการวิเคราะห์ข้อมูล

นี่คือตัวอย่างที่ซับซ้อนขึ้น รวมฟีเจอร์ sentiment analysis และการแสดงผลข้อมูลแบบ real-time:

import streamlit as st
import openai
import pandas as pd
import plotly.express as px
from datetime import datetime
import os
from dotenv import load_dotenv

load_dotenv()

ตั้งค่า HolySheep AI
openai.api_key = os.getenv("HOLYSHEEP_API_KEY")
openai.api_base = "https://api.holysheep.ai/v1"

st.set_page_config(
    page_title="AI Sentiment Analyzer",
    page_icon="📊",
    layout="wide"
)

Sidebar สำหรับตั้งค่า
with st.sidebar:
    st.header("⚙️ ตั้งค่า")
    model = st.selectbox(
        "เลือกโมเดล",
        ["gpt-4.1", "claude-sonnet-4.5", "gemini-2.5-flash", "deepseek-v3.2"],
        index=0
    )
    temperature = st.slider("Temperature", 0.0, 1.0, 0.7)
    max_tokens = st.slider("Max Tokens", 100, 2000, 1000)
    
    st.markdown("---")
    st.markdown("💡 **เคล็ดลับ:** ใช้ Gemini 2.5 Flash สำหรับงานที่ต้องการความเร็ว แต่ถ้าต้องการคุณภาพสูง ใช้ Claude Sonnet 4.5")
    st.markdown("📌 **ราคา HolySheep 2026/MTok:** GPT-4.1 $8 | Claude 4.5 $15 | Gemini 2.5 $2.50 | DeepSeek $0.42")

Main content
st.title("📊 AI Sentiment Analyzer Dashboard")

สร้าง 2 columns
col1, col2 = st.columns(2)

with col1:
    st.subheader("🔍 วิเคราะห์ข้อความ")
    user_input = st.text_area(
        "ป้อนข้อความที่ต้องการวิเคราะห์",
        height=150,
        placeholder="พิมพ์ข้อความรีวิวสินค้าหรือความคิดเห็นที่นี่..."
    )
    
    if st.button("🚀 วิเคราะห์", use_container_width=True):
        if user_input:
            with st.spinner("กำลังวิเคราะห์ความรู้สึก..."):
                try:
                    response = openai.ChatCompletion.create(
                        model=model,
                        messages=[
                            {
                                "role": "system",
                                "content": """คุณเป็น AI สำหรับวิเคราะห์ความรู้สึก (Sentiment Analysis)
                                ตอบกลับในรูปแบบ JSON ดังนี้:
                                {
                                    "sentiment": "positive/negative/neutral",
                                    "score": 0.0-1.0,
                                    "emotions": ["ความรู้สึก1", "ความรู้สึก2"],
                                    "summary": "สรุปความเห็น"
                                }"""
                            },
                            {"role": "user", "content": user_input}
                        ],
                        temperature=temperature,
                        max_tokens=max_tokens
                    )
                    
                    result = response.choices[0].message.content
                    st.session_state.last_result = result
                    st.session_state.analysis_count = st.session_state.get("analysis_count", 0) + 1
                    
                except Exception as e:
                    st.error(f"❌ เกิดข้อผิดพลาด: {str(e)}")

with col2:
    st.subheader("📈 สถิติการใช้งาน")
    
    # แสดงสถิติ
    if "analysis_count" in st.session_state:
        st.metric("จำนวนการวิเคราะห์", st.session_state.analysis_count)
    else:
        st.metric("จำนวนการวิเคราะห์", 0)
    
    # แสดงผลการวิเคราะห์ล่าสุด
    if "last_result" in st.session_state:
        st.json(st.session_state.last_result)

แสดงข้อมูลบทความ
st.markdown("---")
st.markdown("### 📝 บทความล่าสุดที่วิเคราะห์")
st.info("ผลการวิเคราะห์จะแสดงที่นี่หลังจากกดปุ่มวิเคราะห์")

รันและทดสอบ Application

หลังจากสร้างไฟล์ app.py เสร็จแล้ว คุณสามารถรัน Streamlit ได้ง่ายๆ ด้วยคำสั่ง:

# รัน Streamlit application
streamlit run app.py

หรือถ้าต้องการระบุ port
streamlit run app.py --server.port 8501

สำหรับ development mode ที่รีโหลดอัตโนมัติ
streamlit run app.py --server.runOnSave true

หลังจากรันคำสั่ง Streamlit จะเปิด browser อัตโนมัติที่ http://localhost:8501 และคุณจะเห็น AI chatbot interface พร้อมใช้งานทันที สำหรับการ deploy ขึ้น production คุณสามารถใช้ Streamlit Cloud ซึ่งฟรีสำหรับ public repositories

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

1. ConnectionError: HTTPSConnectionPool timeout

สถานการณ์ข้อผิดพลาด: เมื่อเรียกใช้ API แล้วได้รับข้อความ ConnectionError: HTTPSConnectionPool(host='api.holysheep.ai', port=443): Max retries exceeded

# วิธีแก้ไข: เพิ่ม timeout และ retry configuration
import openai
from openai.cli import api_manager
import os

ตั้งค่า timeout สำหรับ request
openai.api_key = os.getenv("HOLYSHEEP_API_KEY")
openai.api_base = "https://api.holysheep.ai/v1"
openai.request_timeout = 60  # timeout 60 วินาที

หรือใช้ requests session สำหรับ retry
from urllib3.util.retry import Retry
from requests.adapters import HTTPAdapter

session = requests.Session()
retry = Retry(
    total=3,
    backoff_factor=0.5,
    status_forcelist=[500, 502, 503, 504]
)
adapter = HTTPAdapter(max_retries=retry)
session.mount('https://', adapter)

ใช้ session สำหรับ API calls
response = session.post(
    f"{openai.api_base}/chat/completions",
    headers={
        "Authorization": f"Bearer {openai.api_key}",
        "Content-Type": "application/json"
    },
    json={
        "model": "gpt-4.1",
        "messages": [{"role": "user", "content": "ทดสอบ"}]
    },
    timeout=60
)

2. 401 Unauthorized - Invalid API Key

สถานการณ์ข้อผิดพลาด: ได้รับข้อผิดพลาด AuthenticationError: Incorrect API key provided แม้ว่าจะตั้งค่า API key ถูกต้องแล้ว

# วิธีแก้ไข: ตรวจสอบและตั้งค่า API key อย่างถูกต้อง
import os
from dotenv import load_dotenv

load_dotenv()

วิธีที่ 1: ตรวจสอบว่า API key ถูกโหลดหรือไม่
api_key = os.getenv("HOLYSHEEP_API_KEY")
if not api_key:
    raise ValueError("HOLYSHEEP_API_KEY ไม่พบใน environment variables")

ตัดช่องว่างและ newline ท
แหล่งข้อมูลที่เกี่ยวข้อง
📚 บทช่วยสอน AI API
💰 ดูราคา
📖 เอกสารสำหรับนักพัฒนา
🚀 สมัครฟรี
บทความที่เกี่ยวข้อง
Claude Batch API ประหยัดค่าใช้จ่าย 50% ด้วยการประมวลผลแบบกลุ
การเชื่อมต่อ AI API สำหรับนักพัฒนายุโรปตะวันออก: โอกาสและคู่
สอนใช้ Claude Vision: วิเคราะห์รูปภาพและ PDF แบบโครงสร้างด้ว