15. CRUD7-허깅페이스 연결하기 – Django가 대신 모델을 부르게 하기

pip install python-dotenv requests

HF_TOKEN=hf_여기에_복사한_토큰을_붙여_넣습니다
HF_MODEL=Qwen/Qwen2.5-7B-Instruct

.env
__pycache__/

from dotenv import load_dotenv

load_dotenv()   # .env 파일의 값을 읽어 들입니다.

import os

import requests

# OpenAI 규격과 같은 모양으로 받아 주는 허깅페이스 주소입니다.
API_URL = "https://router.huggingface.co/v1/chat/completions"

# 응답을 30초까지 기다립니다. 이 값을 두지 않으면 무한정 기다립니다.
TIMEOUT = 30

class ChatError(Exception):
    """모델 호출이 실패했을 때 쓰는 오류입니다."""

def ask_model(messages):
    """주고받은 글 목록을 보내고 답변 문장을 돌려받습니다."""

    token = os.environ.get("HF_TOKEN")
    model = os.environ.get("HF_MODEL")

    if not token:
        raise ChatError("서버에 토큰이 설정돼 있지 않습니다.")

    try:
        res = requests.post(
            API_URL,
            headers={"Authorization": f"Bearer {token}"},
            json={"model": model, "messages": messages, "max_tokens": 512},
            timeout=TIMEOUT,
        )
    except requests.Timeout:
        raise ChatError("모델이 30초 안에 답하지 않았습니다.")
    except requests.RequestException:
        raise ChatError("모델 서버에 연결하지 못했습니다.")

    if res.status_code == 401 or res.status_code == 403:
        raise ChatError("토큰이 올바르지 않거나 권한이 없습니다.")
    if res.status_code == 429:
        raise ChatError("사용 한도를 넘었습니다. 잠시 뒤 다시 시도합니다.")
    if res.status_code >= 400:
        raise ChatError(f"모델 서버가 {res.status_code} 를 돌려줬습니다.")

    data = res.json()
    # 답변 문장은 choices 목록의 첫 번째 안에 들어 있습니다.
    return data["choices"][0]["message"]["content"]

from .ai import ChatError, ask_model
from .models import Conversation, Message

    @action(detail=True, methods=["post"])
    def ask(self, request, pk=None):
        conversation = self.get_object()

        text = (request.data.get("content") or "").strip()
        if not text:
            return Response(
                {"detail": "보낼 내용이 비어 있습니다."},
                status=status.HTTP_400_BAD_REQUEST,
            )

        # 1) 사람이 쓴 글을 먼저 저장합니다.
        Message.objects.create(conversation=conversation, role="user", content=text)

        # 2) 이 방의 지난 대화를 모두 모아 모델에 넘길 모양으로 바꿉니다.
        #    지난 대화를 함께 보내야 모델이 앞 이야기를 이어 갑니다.
        history = [
            {"role": m.role, "content": m.content}
            for m in conversation.messages.all()
        ]

        try:
            answer = ask_model(history)
        except ChatError as err:
            # 모델 호출만 실패한 것이라 사람이 쓴 글은 지우지 않고 남겨 둡니다.
            return Response({"detail": str(err)}, status=status.HTTP_502_BAD_GATEWAY)

        # 3) 받은 답을 저장합니다.
        reply = Message.objects.create(
            conversation=conversation, role="assistant", content=answer
        )

        return Response(
            MessageSerializer(reply).data, status=status.HTTP_201_CREATED
        )

python manage.py runserver

{"content": "안녕하세요. 자기소개를 한 문장으로 해 주세요."}

  // 지금 열어 둔 대화방. 고르지 않았으면 null 입니다.
  const [current, setCurrent] = useState(null);
  // 보내는 중인지 표시하는 자리.
  const [sending, setSending] = useState(false);

  // 대화방 하나를 열어 그 안의 글까지 받아 옵니다.
  async function openRoom(id) {
    const res = await fetch(`${API}/conversations/${id}/`);
    setCurrent(await res.json());
  }

          <li key={room.id}>
            <button onClick={() => openRoom(room.id)}>{room.title}</button>
            <button onClick={() => renameRoom(room.id, room.title)}>이름 변경</button>
            <button onClick={() => removeRoom(room.id)}>삭제</button>
          </li>

      {current && (
        <div>
          <h2>{current.title}</h2>
          {current.messages.map((m) => (
            <p key={m.id}>
              <b>{m.role === "user" ? "나" : "모델"}</b> {m.content}
            </p>
          ))}
        </div>
      )}

  // 질문을 보내고 답이 오면 대화방을 다시 받아 옵니다.
  async function send(text) {
    if (!text.trim() || sending) return;
    setSending(true);

    try {
      const res = await fetch(`${API}/conversations/${current.id}/ask/`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content: text }),
      });

      if (!res.ok) {
        const err = await res.json();
        window.alert(err.detail ?? "답을 받지 못했습니다.");
        return;
      }

      // 사람 글과 모델 글이 모두 저장된 상태를 다시 받아 옵니다.
      await openRoom(current.id);
    } finally {
      // 실패하든 성공하든 보내기 표시를 끕니다.
      setSending(false);
    }
  }

          <input
            id="ask"
            placeholder="질문을 입력합니다"
            disabled={sending}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                send(e.target.value);
                e.target.value = "";
              }
            }}
          />
          {sending && <p>답을 기다리는 중입니다.</p>}