05 파이썬 챗봇 만들기

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

1
from fastapi import FastAPI                         # 01
2
from fastapi.middleware.cors import CORSMiddleware  # 02
3
from pydantic import BaseModel                      # 03
4
import requests, os                                 # 04
5
from dotenv import load_dotenv                      # 05
6

7
load_dotenv()                                       # 06
8
app = FastAPI()                                     # 07
9

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

17
class Msg(BaseModel):                               # 14
18
    text: str                                       # 15
19

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

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

35
@app.post("/chat")                                  # 29
36
def chat(msg: Msg):                                 # 30
37
    reply = ask_ai(msg.text)                        # 31
38
    return {"reply": reply}                         # 32

1
fastapi
2
uvicorn
3
requests
4
python-dotenv

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

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

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

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

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

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

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

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

1
backend/.env
2
backend/.venv/
3
frontend/node_modules/

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

  legacy-peer-deps=true

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

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

8
    payload = {
9
        "model": HF_MODEL,
10
        "messages": [
11
            {"role": "system", "content": system}, # 역할 설정
12
            {"role": "user",   "content": q}        # 사용자 질문
13
        ],
14
        "max_tokens": 300
15
    }
16
    res = requests.post(HF_URL, headers=headers, json=payload)
17
    data = res.json()
18
    return data["choices"][0]["message"]["content"]

1
사용자 입력
2
    ↓
3
리액트 (fetch POST /chat)
4
    ↓
5
파이썬 FastAPI (/chat 엔드포인트)
6
    ↓
7
허깅페이스 API (AI 모델 호출)
8
    ↓
9
AI 응답 반환
10
    ↓
11
리액트 화면에 메시지 출력