OpenAI API (ChatGPT) 응답결과를 채팅처럼 가공해보자.

https://mitw.tistory.com/75

ChatGPT를 사용해보자. OpenAI API java 예제

먼저 앞선 예제를 이은 내용임.

 

질문 : mitw.tistory.com이라는 블로거는 누군가?

일 때, 답변은 아래와 같다.

 

위 Json을 https://jsonlint.com/로 깔끔하게 정리하면,

 

{
    "id": "cmpl-8co7FOJBZDdUN8Wq7bg6hNkmBGAlL",
    "object": "text_completion",
    "created": 1704259801,
    "model": "gpt-3.5-turbo-instruct",
    "choices": [
        {
            "text": "\n\nmitw.tistory.com은 한국의 블로그 플랫폼인 Tistory에서 운영되는 블로그이다. 블로거의 실제 신원은 알 수 없으며, 블로그의 주제는 다양한 IT 기술과 개발 관련 내용을 다루고 있다.",
            "index": 0,
            "logprobs": null,
            "finish_reason": "stop"
        }
    ],
    "usage": {
        "prompt_tokens": 21,
        "completion_tokens": 94,
        "total_tokens": 115
    }
}

 

choices의 text를 가져와서 가공을 하여 chatGPT가 마치 채팅을 하는 것 처럼 꾸며보자.

 

먼저 결과는 아래와 같다.

 

vanillaJs라고 가정하자.

ajax를 통한 비동기 통신을 한다.

일단, 예제에서 css는 전부 빼겠음.

 

<div class="tool" style="width: 600px">
    <div class="chatgpt" style="">
        <div>
            <span>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0wbtlQQ4LGHbwzmIQaswEecmxDnPALLsBeA&amp;usqp=CAU">
            </span>
            <p>mitw.tistory.com이라는 블로거는 누군가?</p>
        </div>
        <div class="answer">
            <span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjzvSXcPrduO6Rpuj1tU1WhJ8uptBFxxUew7lBWGW4JSZEbpJCQAi6aNfrsvIIPmIp-aw&amp;usqp=CAU" /></span>
            <p id="resultArea"></p>
        </div>
    </div>
</div>

위와 같은 html 태그가 존재한다라고 가정하면, 

 

let rMsg = '';

fetch('https://cgpt.mitw.tisroty.com/data', {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({
        prompt: 'mitw.tistory.com이라는 블로거는 누군가?'
    })
}).then(response => response.json())
    .then(data => {
        if(data.statusCode === '200') {
            document.getElementById('resultArea').innerHTML = '';
            rMsg = data.text.replace(/^\n{1,4}/, '');
            chattingViewer();
        } else {

        }
        console.log(data);
    })
    .catch(error => {
        throw new Error('데이터를 불러오는 중 오류 발생 : '+ error);
    });

function chattingViewer() {
    const targetElement = document.getElementById('resultArea');
    let index = 0;
    function showNextCharacter() {
        if (index < rMsg.length) {
            if (rMsg[index] === '\n') {
                targetElement.append('<br>');
            } else if (rMsg[index] === '\t') {
                targetElement.append('&nbsp;&nbsp;');
            } else {
                targetElement.append(rMsg[index]);
            }
            index++;
        } else {
            clearInterval(animationInterval);
        }
    }
    const animationInterval = setInterval(showNextCharacter, 20);
}

 

위와 같이 js로 컨트롤하면 된다.

 

ChatGPT 결과에는 항상 '\n'이  1~4개 정도 끼어져있다.

그래서 정규식을 통하여 처음의 '\n'이 1~4개 존재할 경우 모두 공백으로 치환하고, 

글자길이만큼 20ms마다 append해준다. 그러면 채팅같이 보일 것임.

글 중간에 '\n'이 보일 경우 <br>로 치환해주고, '\t'이 보일 경우 &nbsp;&nbsp;로 치환해주면 위 결과와 같은 화면을 얻을 수 있다. 채팅처럼..