Django ChatGPT 연결

도나·2023년 11월 24일

저희 팀은 일기를 작성하면 크레파스로 그린 듯한 아이의 그림체로 변환해주는 프로그램을 만드는 과정에 있습니다. 핵심 부분은 모델 튜닝이지만... ~~이 부분은 방학 때 하는 것으로 넘겨보도록 한다 (긁적)~~

우선 글을 이미지로 바꾸어주는 과정에서 프롬프트 작성에 ChatGPT를 사용하기로 해서 Django에 ChatGPT를 연결한 과정을 보여드리려고 합니다.

CGPT / 장고& openai 설치

pip install django
pip install openai

챗지피티를 연결하려면 우선 openai에서 API keys를 발급받아야 합니다.

로그인을 한 뒤 API keys에 들어가면 나오는 화면입니다.
Create new secret key를 눌러 키의 이름을 정하고 나면 키가 생성됩니다.
이때 팝업창에 뜬 키는 복사해서 반드시!!! 다른 곳에 저장해둬야 합니다다. 팝업창을 끄면 다시는 API key를 확인할 수 없기 때문입니다.

프로그램, 앱 생성

django-admin startproject config.
django-admin startapp CGPT

CGPT 앱의 urls.py는 직접 생성해야하며 templates 폴더 또한 직접 생성해줘야 합니다.
(아래 db_conncection.py는 다른 팀원의 것으로 무시해도 좋습니다)

CGPT / views.py

from django.shortcuts import render 
from django.http import JsonResponse 
import openai
import os

openai.api_key='s--y' #앞서 자신이 부여받은 API key를 넣으면 된다. 절대 외부에 공개해서는 안된다.

def get_completion(prompt): 
	print(prompt) 
	query = openai.ChatCompletion.create( 
		model="gpt-3.5-turbo",
		messages=[
        	{'role':'user','content': prompt}
    	], 
		max_tokens=1024, 
		n=1, 
		stop=None, 
		temperature=0.5, 
	) 
	response = query.choices[0].message["content"]
	print(response) 
	return response 


def query_view(request): 
	if request.method == 'POST': 
		prompt = request.POST.get('prompt') 
		prompt=str(prompt)
		response = get_completion(prompt)
		return JsonResponse({'response': response}) 
	return render(request, 'index.html')

CGPT / urls.py

from django.contrib import admin 
from django.urls import path 
from . import views 

urlpatterns = [ 
	path('', views.query_view, name='query_view'), 

]

url을 설정하고 views.py에서 정의한 view 메소드와 연결

config / urls.py

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('CGPT/', include('CGPT.urls')),
    path('', include('CGPT.urls')),
]

path 함수의 첫 번째 인자 = 클라이언트가 요청할 path
프로젝트 폴더의 공통 urls.py에 웹 앱의 url를 추가할 때마다 계속 추가하는 것은 번거로우므로 웹 앱별로 다른 ruls.py를 선언하고 프로젝트 폴더의 공통 urls.py에 해당 파일들을 포함하도록 만든다.
[참고] https://lar542.github.io/Django/2019-06-17-first_django_ptoject/ -> 설명 good

config / index.html

<!-- query.html -->
<html> 
<head> 
	<title>Query</title> 
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
	<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script> 
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> 
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous"> 
	<script> 
		$(document).ready(function() { 
			// Send the form on enter keypress and avoid if shift is pressed 
			$('#prompt').keypress(function(event) { 
				if (event.keyCode === 13 && !event.shiftKey) { 
					event.preventDefault(); 
					$('form').submit(); 
				} 
			}); 
			$('form').on('submit', function(event) { 
				event.preventDefault(); 
			// get the CSRF token from the cookie 
			var csrftoken = Cookies.get('csrftoken'); 
			
			// set the CSRF token in the AJAX headers 
			$.ajaxSetup({ 
				headers: { 'X-CSRFToken': csrftoken } 
			}); 
				// Get the prompt 
				var prompt = $('#prompt').val(); 
				var dateTime = new Date(); 
				var time = dateTime.toLocaleTimeString(); 
				// Add the prompt to the response div 
				$('#response').append('<p>('+ time + ') <i class="bi bi-person"></i>: ' + prompt + '</p>'); 
				// Clear the prompt 
				$('#prompt').val(''); 
				$.ajax({ 
					url: '/', 
					type: 'POST', 
					data: {prompt: prompt}, 
					dataType: 'json', 
					success: function(data) { 
						$('#response').append('<p>('+ time + ') <i class="bi bi-robot"></i>: ' + data.response + '</p>'); 
					} 
				}); 
			}); 
		}); 
	</script> 
</head> 
<body> 
	<div class="container p-3"> 
		<h3>ChatGPT Clone</h3> 
		<div class="mb-3"> 
			<form method="post"> 
				{% csrf_token %} 
				<label for="prompt" class="form-label"><strong>Prompt: </strong></label> 
				<textarea class="form-control" type="textarea" id="prompt" name="prompt" rows="3"></textarea> 
				<br> 
				<button class="btn btn-primary" type="submit">Submit</button> 
			</form> 
		</div> 
		<br> 
		<div class="mb-3"> 
			<h6>Response:</h6> 
			<div class="container border overflow-auto h-50" id="response"></div> 
			
		</div> 
	</div> 
</body> 
</html>