⊢ AI 모델 활용

ChatGPT, FastAPI 활용 챗 서비스 구현

최 수빈 2025. 3. 27. 21:27

 

  • 웹 클라이언트(UI) 구성
  • FastAPI 서버 구현
  • OpenAI API를 통한 챗봇 응답 처리
  • 대화 상태 관리

 

전체 구성요소 요약

.
├── README.md
└── fastgpt
    ├── __pycache__
    │   └── app.cpython-310.pyc
    ├── app.py
    ├── static
    │   └── style.css
    └── templates
        └── index.html

 

index.html 사용자 인터페이스 (입력창 + 대화 내역 표시)

style.css 인터페이스의 스타일 정리

app.py FastAPI 서버, OpenAI API 연동, 대화 흐름 관리

temlplages/ HTML 템플릿 디렉토리

static/ 정적 파일 디렉토리 (CSS 포함)

 

 

 

HTML 템플릿 (index.html)

사용자 입력 폼과 대화 내역을 출력하는 구조

Jinja2 문법({% for %} 등)을 사용하여 서버에서 전달받은 데이터를 렌더링

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>대화 서비스</title>
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>
    <div class="container">
        <h1>대화 서비스</h1>

        <!-- 대화 내역 -->
        <div class="conversation">
            {% if conversation_history %}
            <h2>대화 내역</h2>
            {% for message in conversation_history %}
            <div class="message {{ message.role }}">
                <p><strong>{{ message.role.capitalize() }}:</strong>{{ message.content }}</p>
            </div>
            {% endfor %}
            {% endif %}
        </div>

        <!-- 사용자 입력 폼 -->
        <form action="/chat" method="post">
            <label for="user_input">메시지를 입력하세요:</label><br>
            <textarea id="user_input" name="user_input" rows="4" cols="50"></textarea>
            <br><br>
            <button type="submit">전송</button>
        </form>
    </div>
</body>

</html>

 

 

CSS 스타일 (style.css)

사용자와 AI 메시지를 시각적으로 구분

읽기 쉽고 직관적인 대화 UI 제공

@import url('https://fastly.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

@font-face {
    font-family: 'DungGeunMo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'DungGeunMo', 'Galmuri9';
    background-color: #00007E;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #f4f4f4;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}

h1 {
    text-align: center;
    color: #333;
}

textarea {
    resize: none;
    width: 98%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
}

button {
    padding: 10px 20px;
    background-color: #4Ca7a9;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45999a;
}

.conversation {
    margin-top: 20px;
}

.message {
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    max-width: 60%;
    word-wrap: break-word;
}

.message.user {
    background-color: #bbbbbb;
    margin-left: auto;
    text-align: right;
}

.message.assistant {
    background-color: #bbbbbb;
    margin-right: auto;
    text-align: left;
}

p {
    margin: 0;
    color: #ffffff;
}

 

 

FastAPI 서버 (app.py)

 

기본 설정

from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from openai import OpenAI
import os

FastAPI: 백엔드 웹 프레임워크

OpenAI: ChatGPT API 호출용 클라이언트

Jinja2: HTML에서 파이썬 변수/로직 사용 가능하게 하는 템플릿 엔진

 

템플릿 및 정적 파일 등록

# Jinja2 템플릿 설정
templates = Jinja2Templates(directory="templates")
# 정적 파일 서빙
app.mount("/static", StaticFiles(directory="static"), name="static")

정적 파일 서빙: CSS 같은 파일을 클라이언트에게 제공할 때 사용

 

대화 흐름 관리

 

시스템 프롬프트

system_message = {
    "role": "system",
    "content": "아무말이나 해. 근데 재미없으면 안돼. 무조건 재밌는 말만해라. 마치 알파세대처럼 말해.",
}
messages = [system_message]

사용자가 보기 전 설정되는 숨겨진 지시사항 역할

초기 역할을 정하고, 대화의 성격을 유도

 

 

API 통신 흐름

 

GET /

@app.get("/")
async def get_chat_page(request: Request):
    return templates.TemplateResponse("index.html", {
        "request": request,
        "conversation_history": [msg for msg in messages if msg["role"] != "system"]
    })

페이지 최초 접속 시 대화 내역 표시

 

POST /chat

@app.post("/chat")
async def chat(request: Request, user_input: str = Form(...)):
    messages.append({"role": "user", "content": user_input})

    completion = client.chat.completions.create(
        model="gpt-4o",
        messages=messages
    )

    assistant_reply = completion.choices[0].message.content
    messages.append({"role": "assistant", "content": assistant_reply})

사용자 입력을 받아 ChatGPT에 전달

응답을 받아 다시 출력 영역에 표시

 

from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from openai import OpenAI
import os

app = FastAPI()

# OpenAI API 클라이언트 설정
client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY0"))

# Jinja2 템플릿 설정
templates = Jinja2Templates(directory="templates")
# 정적 파일 서빙
app.mount("/static", StaticFiles(directory="static"), name="static")

# 초기 시스템 메시지 설정
system_message = {
    "role": "system",
    "content": "아무말이나 해. 근데 재미없으면 안돼. 무조건 재밌는 말만해라. 마치 알파세대처럼 말해.",
}

# 대화 내역을 저장할 리스트 초기화
messages = [system_message]


@app.get("/", response_class=HTMLResponse)
async def get_chat_page(request: Request):
    """채팅 페이지 렌더링"""
    conversation_history = [msg for msg in messages if msg["role"] != "system"]
    return templates.TemplateResponse(
        "index.html", {"request": request, "conversation_history": conversation_history}
    )


@app.post("/chat", response_class=HTMLResponse)
async def chat(request: Request, user_input: str = Form(...)):
    """사용자 메시지를 받아 OpenAI API 호출 및 응답 반환"""
    global messages

    # 사용자의 메시지를 대화 내역에 추가
    messages.append({"role": "user", "content": user_input})

    # OpenAI API 호출
    completion = client.chat.completions.create(model="gpt-4o", messages=messages)

    # AI의 응답 가져오기
    assistant_reply = completion.choices[0].message.content

    # AI의 응답을 대화 내역에 추가
    messages.append({"role": "assistant", "content": assistant_reply})

    # 화면에 표시될 대화 내역에서 system 메시지를 제외하고 전달
    conversation_history = [msg for msg in messages if msg["role"] != "system"]

    # 결과를 HTML로 반환 (대화 내역과 함께)
    return templates.TemplateResponse(
        "index.html", {"request": request, "conversation_history": conversation_history}
    )

 

 

상태 관리

messages는 서버 메모리에 저장됨 → 서버 재시작 시 초기화됨

실제 서비스에서는 사용자별 세션 관리 및 DB 저장 필요

 

 

AI API 요금 최적화

 

현재 구조

사용자가 메시지 1개 보낼 때마다 지금까지 주고받은 모든 대화를 messages에 담아서 보냄

→ 누적될수록 토큰 쌓임

 

최적화 방법

  • 최근 대화 몇 개만 유지
  • 요약해서 문맥 유지
    오래된 대화 내용 요약 → system message에 넣음
    최근 몇 개 대화만 messages에 유지
  • 사용자 단위로 대화 로그 저장, 서버에서는 짧게 처리
    서버에는 최근 메시지만 사용
    전체 대화 내역은 DB나 로그로 따로 저장

대화 서비스

 

저작자표시 비영리 변경금지

'⊢ AI 모델 활용' 카테고리의 다른 글

음성 생성과 번역을 활용한 데스크톱 번역기  (0) 2025.03.28
OpenCV, YOLOv8, PyQt5활용 실시간 객체 탐지 서비스 구현  (1) 2025.03.27
FastAI: 사전 학습된 모델을 활용한 이미지 분류  (4) 2025.03.27
Ultralytics YOLOv8를 활용한 이미지 및 실시간 객체 탐지  (1) 2025.03.26
ChatGPT와 ElevenLabs실습: 텍스트에서 음성까지  (2) 2025.03.26

'⊢ AI 모델 활용'의 다른글

  • 현재글ChatGPT, FastAPI 활용 챗 서비스 구현

관련글

티스토리툴바