세션 - 2024.02.20
본 세션의 목적:
- chatGPT를 이용한 데이터 분석 실습
- chatGPT와 함께 서비스 개발하기
세션에 참여하기 위한 준비물:
- 카카오톡 대화 데이터
- chatGPT 4.0 유료 결제 계정
최종 결과물:
- 카카오톡 데이터 분석 웹 페이지 파일
#1 chatGPT로 카카오톡 대화 분석하기
왠만한 Text 데이터는 chatGPT를 활용해 원하는 대로 가공 및 활용할 수 있습니다.
카카오톡 대화 역시도 text이기 때문에 chatGPT를 활용할 수 있지요.
1) 대화 내용 추출하기
2) ChatGPT에게 분석 요청하기
GPT 4.0은 파일을 입력받을 수 있습니다. 만약 GPT 3.5를 사용하고 있다면 텍스트를 복사해서 입력하는 방식을 사용하면 좋습니다.
- 예시
- 분석하고자 하는 방향을 선택합니다
ex. 애정도 확인, 누가 가장 대화를 많이 시도했는가, 특이한 점이 있는가 등
3) ChatGPT API Key 획득하기
카카오톡 데이터 분석 서비스 만들기
자, 이제 우리는 서비스를 개발해 볼겁니다. 개발을 잘 못해도 상관 없습니다. GPT가 알려줄거거든요.
1) GPT에게 일 시키기
3) 개발자 도구 사용하기
2) 데이터 추가하기
I think there are some errors. First, GPT 3.5's maximum context length is too short. Let's use "gpt-4-1106-preview" Second, Let' get a json response. So we can use the response directly. Make sure that GPT only returns the data without explanation.
응답을 조금 수정한 결과는 다음과 같다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat Analysis with ChatGPT</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } h2 { color: #333; } #fileInput, #apiKey, #analyzeButton { margin-bottom: 20px; } .results { margin-top: 20px; } </style> </head> <body> <div> <h2>Chat CSV Analyzer</h2> <input type="text" id="apiKey" placeholder="Enter your OpenAI API key here"> <input type="file" id="fileInput" accept=".csv"> <button id="analyzeButton">Analyze with ChatGPT</button> <div class="results"> <h2>Who did chat most?</h2> <p id="mostChat">Loading...</p> <h2>Who did bad words most?</h2> <p id="mostBadWords">Loading...</p> <h2>ChatGPT Analysis</h2> <p id="chatGPTAnalysis">Waiting for analysis...</p> </div> </div> <script> let csvText = ''; // Store the CSV text globally document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { csvText = e.target.result; // Store the loaded CSV text analyzeChatData(csvText); }; reader.readAsText(file); }); document.getElementById('analyzeButton').addEventListener('click', function() { const apiKey = document.getElementById('apiKey').value.trim(); if (!apiKey) { alert('Please enter your OpenAI API key.'); return; } if (!csvText) { alert('Please upload a chat CSV file.'); return; } analyzeWithChatGPT(apiKey, csvText); }); function analyzeWithChatGPT(apiKey, csvText) { const chatGPTAnalysis = document.getElementById('chatGPTAnalysis'); chatGPTAnalysis.textContent = 'Analyzing with ChatGPT...'; // Send the CSV content and the question to ChatGPT fetch('https://api.openai.com/v1/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ model: "gpt-4-1106-preview", prompt: `Given the chat log data: ${csvText.replace(/\n/g, "\\n")}, identify who used bad words the most. Return the result in JSON format.`, max_tokens: 100, temperature: 0.7, n: 1, stop: null }) }) .then(response => response.json()) .then(data => { if(data.choices && data.choices.length > 0 && data.choices[0].text.trim() !== "") { chatGPTAnalysis.textContent = `Result: ${data.choices[0].text}`; } else { chatGPTAnalysis.textContent = 'No clear result.'; } }) .catch(error => { console.error('Error:', error); chatGPTAnalysis.textContent = 'Failed to analyze with ChatGPT.'; }); } </script> </body> </html>
참고
It does not return any response from chatGPT. Below is the proper example of using chatGPT API. Considering this and give me the correct modified code from previous answer. But do not use gpt3.5 but use gpt-4-1106-preview. Do not change model. Make sure to use "gpt-4-1106-preview." [Example 1] curl https://api.openai.com/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer $OPENAI_API_KEY" \ -d '{ "model": "gpt-3.5-turbo", "messages": [{"role": "user", "content": "Say this is a test!"}], "temperature": 0.7 }' [Example 2] from openai import OpenAI client = OpenAI() response = client.chat.completions.create( model="gpt-3.5-turbo-0125", response_format={ "type": "json_object" }, messages=[ {"role": "system", "content": "You are a helpful assistant designed to output JSON."}, {"role": "user", "content": "Who won the world series in 2020?"} ] ) print(response.choices[0].message.content)
응답을 조금 수정한 결과는 다음과 같다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat Analysis with ChatGPT</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } h2 { color: #333; } #fileInput, #apiKey, #analyzeButton { margin-bottom: 20px; } .results { margin-top: 20px; } </style> </head> <body> <div> <h2>Chat CSV Analyzer</h2> <input type="text" id="apiKey" placeholder="Enter your OpenAI API key here"> <input type="file" id="fileInput" accept=".csv"> <button id="analyzeButton">Analyze with ChatGPT</button> <div class="results"> <h2>Who did chat most?</h2> <p id="mostChat">Loading...</p> <h2>Who did bad words most?</h2> <p id="mostBadWords">Loading...</p> <h2>ChatGPT Analysis</h2> <p id="chatGPTAnalysis">Waiting for analysis...</p> </div> </div> <script> let csvText = ''; // Store the CSV text globally document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { csvText = e.target.result; // Store the loaded CSV text }; reader.readAsText(file); }); document.getElementById('analyzeButton').addEventListener('click', function() { const apiKey = document.getElementById('apiKey').value.trim(); if (!apiKey) { alert('Please enter your OpenAI API key.'); return; } if (!csvText) { alert('Please upload a chat CSV file.'); return; } analyzeWithChatGPT(apiKey, csvText); }); function analyzeWithChatGPT(apiKey, csvText) { const chatGPTAnalysis = document.getElementById('chatGPTAnalysis'); chatGPTAnalysis.textContent = 'Analyzing with ChatGPT...'; fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ model: "gpt-4-1106-preview", response_format: { "type": "json_object" }, messages: [ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": `Analyze this [ChatLog] and determine who used bad words the most and who chated most. Give me the result with json format. Do not explain me the result. Result should follow the [Format] [Format] { "mostChat": "User1", "mostBadWords": "User2", } [ChatLog] ${csvText} `} ] }) }) .then(response => response.json()) .then(data => { if(data.choices && data.choices.length > 0 && data.choices[0].message.content.trim() !== "") { chatGPTAnalysis.textContent = `Result: ${data.choices[0].message.content}`; } else { chatGPTAnalysis.textContent = 'No clear result.'; } }) .catch(error => { console.error('Error:', error); chatGPTAnalysis.textContent = 'Failed to analyze with ChatGPT.'; }); } </script> </body> </html>