5. 파이썬 챗봇 만들기

my-chatbot/
├── backend/        ← 파이썬 서버
│   ├── main.py
│   └── requirements.txt
└── frontend/       ← 리액트 화면
    ├── src/
    │   ├── App.jsx
    │   └── App.css
    └── package.json

mkdir my-chatbot
cd my-chatbot
mkdir backend
mkdir frontend

cd backend
python -m venv .venv
.venv\Scripts\activate

cd backend
python3 -m venv .venv
source .venv/bin/activate

pip install fastapi uvicorn requests python-dotenv

HF_TOKEN=hf_여기에_내_키를_붙여넣기

from fastapi import FastAPI                         # 01
from fastapi.middleware.cors import CORSMiddleware  # 02
from pydantic import BaseModel                      # 03
import requests, os                                 # 04
from dotenv import load_dotenv                      # 05

load_dotenv()                                       # 06
app = FastAPI()                                     # 07

app.add_middleware(                                 # 08
    CORSMiddleware,                                 # 09
    allow_origins=["*"],                            # 10
    allow_methods=["*"],                            # 11
    allow_headers=["*"],                            # 12
)                                                   # 13

class Msg(BaseModel):                               # 14
    text: str                                       # 15

HF_URL = "https://router.huggingface.co/v1/chat/completions" # 16
HF_MODEL = "Qwen/Qwen2.5-72B-Instruct"             # 17

def ask_ai(q: str) -> str:                          # 18
    token = os.getenv("HF_TOKEN")                   # 19
    headers = {"Authorization": f"Bearer {token}"}  # 20
    payload = {                                     # 21
        "model": HF_MODEL,                          # 22
        "messages": [{"role": "user", "content": q}], # 23
        "max_tokens": 300                           # 24
    }                                               # 25
    res = requests.post(HF_URL, headers=headers, json=payload) # 26
    data = res.json()                               # 27
    return data["choices"][0]["message"]["content"] # 28

@app.post("/chat")                                  # 27
def chat(msg: Msg):                                 # 28
    reply = ask_ai(msg.text)                        # 29
    return {"reply": reply}                         # 30

uvicorn main:app --reload

fastapi
uvicorn
requests
python-dotenv

cd ../frontend
npm create vite@latest . -- --template react
npm install

import { useState } from "react";          // 01
import "./App.css";                         // 02

const API = "http://localhost:8000/chat";  // 03

export default function App() {            // 04
  const [msgs, setMsgs] = useState([]);   // 05
  const [input, setInput] = useState(""); // 06
  const [loading, setLoading] = useState(false); // 07

  const send = async () => {              // 08
    if (!input.trim()) return;            // 09
    const userMsg = { role: "user", text: input }; // 10
    setMsgs(prev => [...prev, userMsg]);  // 11
    setInput("");                         // 12
    setLoading(true);                     // 13

    const res = await fetch(API, {        // 14
      method: "POST",                     // 15
      headers: { "Content-Type": "application/json" }, // 16
      body: JSON.stringify({ text: input }) // 17
    });                                   // 18
    const data = await res.json();        // 19
    const botMsg = { role: "bot", text: data.reply }; // 20
    setMsgs(prev => [...prev, botMsg]);   // 21
    setLoading(false);                    // 22
  };                                      // 23

  const onKey = (e) => {                  // 24
    if (e.key === "Enter") send();        // 25
  };                                      // 26

  return (                                // 27
    <div className="wrap">               // 28
      <h1>🤖 AI 챗봇</h1>               // 29
      <div className="box">              // 30
        {msgs.map((m, i) => (            // 31
          <div key={i} className={m.role}> // 32
            <span>{m.role === "user" ? "🧑" : "🤖"}</span> // 33
            <p>{m.text}</p>              // 34
          </div>                         // 35
        ))}                              // 36
        {loading && <p className="loading">생각 중...</p>} // 37
      </div>                             // 38
      <div className="input-row">        // 39
        <input                           // 40
          value={input}                  // 41
          onChange={e => setInput(e.target.value)} // 42
          onKeyDown={onKey}              // 43
          placeholder="메시지를 입력하세요" // 44
        />                               // 45
        <button onClick={send}>전송</button> // 46
      </div>                             // 47
    </div>                               // 48
  );                                     // 49
}                                        // 50

.wrap { max-width: 600px; margin: 40px auto; font-family: sans-serif; }
.box  { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 16px; }
.user { text-align: right; margin: 8px 0; }
.bot  { text-align: left;  margin: 8px 0; }
.user p, .bot p { display: inline-block; padding: 8px 12px; border-radius: 8px; }
.user p  { background: #d1e7ff; }
.bot  p  { background: #f0f0f0; }
.loading { color: #888; font-style: italic; }
.input-row { display: flex; gap: 8px; margin-top: 8px; }
.input-row input  { flex: 1; padding: 8px; }
.input-row button { padding: 8px 16px; cursor: pointer; }

npm run dev

backend/.env
backend/.venv/
frontend/node_modules/

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/내아이디/my-chatbot.git
git push -u origin main

const API = "https://my-chatbot-xxxx.onrender.com/chat";

  legacy-peer-deps=true

# HF_MODEL 변수의 모델명만 교체한다
HF_MODEL = "meta-llama/Llama-3.1-8B-Instruct"

def ask_ai(q: str) -> str:
    token = os.getenv("HF_TOKEN")
    headers = {"Authorization": f"Bearer {token}"}

    # 캐릭터 역할 설정 (system 메시지로 전달)
    system = "You are a helpful Korean cooking teacher. Answer only about Korean food."

    payload = {
        "model": HF_MODEL,
        "messages": [
            {"role": "system", "content": system}, # 역할 설정
            {"role": "user",   "content": q}        # 사용자 질문
        ],
        "max_tokens": 300
    }
    res = requests.post(HF_URL, headers=headers, json=payload)
    data = res.json()
    return data["choices"][0]["message"]["content"]

사용자 입력
    ↓
리액트 (fetch POST /chat)
    ↓
파이썬 FastAPI (/chat 엔드포인트)
    ↓
허깅페이스 API (AI 모델 호출)
    ↓
AI 응답 반환
    ↓
리액트 화면에 메시지 출력