1. 발상

코딩에 대한 기본 지식이 없는 교사가 GPT API기반의 챗봇을 제작하게 된 과정은 다음과 같다.

먼저, 교사는 CHATGPT에 대한 유튜브 영상을 검색하던 중 구글스프레드시트에서 GPT 함수를 사용할 수 있다는 것을 알게 되었다. GPT 함수는 GPT-API를 활용한 구글스프레드시트의 확장프로그램으로 설치가 가능하다.

이것을 통해 교사는 혹시 단순히 함수를 사용하는 것이 아니라, 챗봇 웹 사이트를 구글 스프레드 시트로 제작할 수 있는 것이 아닌가 하는 아이디어를 얻었다. 그리고 이 문제를 해결하기 위해 ChatGPT4와 대화를 시작하였다.

2. ChatGPT를 통해 웹앱 제작 방법을 발견

교사는 ChatGPT에게 구글 스프레드 시트를 이용하여 GPT API기반 챗봇을 제작할 수 있는 지 질문하였다. ChatGPT는 구글 스프레드 시트에서 앱 스크립트를 확장하여 코드를 작성할 수 있음을 안내하고 예시를 제공하였다. 그러나 코딩에 대한 기본 지식 없는 교사는 추가적으로 ChatGPT에게 앱 스크립트로 GPT-API 기반 챗봇 사이트를 만들 수 있는지 질문하였다. ChatGPT는 앱 스크립트에서 code.gs와 index.html에 입력할 코드와 입력 및 실행 방법을 구체적으로 제공하였다.

이에 따라 교사는 ChatGPT에서 제공 받은 코드를 입력하고 실행하였으나, 응답이 없었다.

이미지 캡쳐1

<aside> 💬 ChatGPT와의 대화 내용

Researcher :

Can I create a GPT API-based chatbot using Google Sheets?

ChatGPT :

Yes, you can create a GPT API-based chatbot using Google Sheets, albeit with some creative integration work. Google Sheets on its own isn't designed to run chatbot logic or API calls directly, but you can use Google Sheets as an interface for input and output while leveraging Google Apps Script, which allows you to run JavaScript to interact with various Google services, including calling external APIs like GPT's API.

Here's a simplified overview of how you could set this up:

Step 1: Set up your Google Sheet

• Create a Google Sheet with columns for User Input, Chatbot Response, and any other relevant information you'd like to track.

Step 2: Use Google Apps Script

• Access the Google Apps Script editor from your Google Sheet by clicking on "Extensions" -> "Apps Script".
• Write a script in Apps Script to fetch the user's input from the Google Sheet, make an API request to the GPT API with that input, and then write the API's response back to the Google Sheet.

(생략)

Researcher :

Can I create a website with Google Apps Script?

ChatGPT :

Yes, you can create a website using Google Apps Script through a feature called Google Apps Script Web Apps. Google Apps Script Web Apps allow you to serve HTML, client-side JavaScript, and CSS directly from a Google Script. This feature can be used to create simple web applications, including websites, that can interact with Google Services like Sheets, Docs, Drive, and more. Here’s how you can create a basic website with Google Apps Script:

1. Open Google Apps Script:
   • Go to the Google Apps Script website (https://script.google.com) and sign in with your Google account.
   • Click on “New Project” to create a new script.
2. Write Your Code:
   • You can write server-side code in the script editor in .gs files and client-side HTML, JavaScript, and CSS in .html files.
   • To add HTML files, go to File > New > Html file.
   • Write your HTML, CSS, and JavaScript as you would for any other web page. Google Apps Script supports templated HTML, allowing you to dynamically generate HTML content by embedding server-side script variables and functions.
3. Create a doGet() Function:
   • For your script to serve web pages, you must implement a doGet(e) function in the .gs file. This function is called whenever a client requests your web app URL.
   • The doGet(e) function should return an HtmlOutput object created by calling the HtmlService.createHtmlOutputFromFile() method, specifying the name of your HTML file.

(생략)

Researcher :

I don't know how to code. I need you to create a webpage for a GPT-based chatbot using Google Sheets and app scripts.

ChatGPT :

Creating a simple webpage for a GPT-based chatbot using Google Sheets and Google Apps Script, especially if you're not familiar with coding, might sound daunting, but I can guide you through the basic steps to set this up. This solution will allow you to use Google Sheets as your database for storing chat inputs and responses and Google Apps Script to create a simple web interface and communicate with the GPT API.

Step 1: Set Up Google Sheets

1. Open Google Sheets and create a new spreadsheet.
2. Label the first column as Input and the second column as Response. These will store your chat inputs and the chatbot's responses, respectively.

Step 2: Google Apps Script Web App

Now, let's create the web app using Google Apps Script.

1. Open the Script Editor:
   • Inside your Google Sheet, click on Extensions > Apps Script.
   • Delete any code in the script editor and rename the project to something like "GPT Chatbot".
2. Create the Script:
   • Paste the following code into the script editor. This code includes functions for the web app interface (doGet) and to handle form submission (doPost). It also has a function callOpenAIAPI that would theoretically call the OpenAI API to get a response based on the user's input. Since this example cannot directly call external APIs without modifications to include your OpenAI API key and because you're not familiar with coding, this part is left as a placeholder for actual API integration.

javascriptCopy code
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function doPost(e) {
  var input = e.parameter.userInput;
  var response = callOpenAIAPI(input); // Placeholder for API call function
  logChat(input, response);
  return HtmlService.createHtmlOutput("Chatbot response: " + response + "<br><a href=''>Ask another question</a>");
}

function callOpenAIAPI(input) {
  // Placeholder for calling OpenAI API
  // You need to implement API calling logic here based on OpenAI documentation.
  // Return a string response from the API.
  return "This is a static response. Replace this with the API call implementation.";
}

function logChat(input, response) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([input, response]);
}

1. Create the HTML File:
   • In the Apps Script editor, select File > New > HTML file.
   • Name it Index.
   • Paste the following basic HTML code. This code creates a simple form where users can input their question and submit it to your chatbot.

htmlCopy code
<!DOCTYPE html>
<html>
  <head>
    <title>GPT-based Chatbot</title>
  </head>
  <body>
    <h1>Ask the Chatbot</h1>
    <form method="post" action="">
      <textarea name="userInput" rows="4" cols="50"></textarea>
      <br>
      <input type="submit" value="Ask">
    </form>
  </body>
</html>

Step 3: Deploy as Web App

1. Click on Deploy > New deployment.
2. Click on Select type and choose Web app.
3. Enter a description for your deployment.
4. Set Who has access to Anyone.
5. Click Deploy.
6. Authorize the script with your Google account.
7. You'll be given a URL for your web app. Visit this URL to interact with your chatbot.

Note:

• The callOpenAIAPI function is a placeholder. For a real GPT-based chatbot, you'd need to implement an API call to OpenAI's GPT. This requires additional steps, including handling API authentication securely, which might be challenging without coding knowledge.
• This guide creates a very basic chat interface. Enhancing the user experience and securing API calls would require further development.

Given the complexities of securely and efficiently integrating with GPT APIs and handling user inputs and responses, it might be beneficial to collaborate with someone who has programming experience or to consider learning some basics of JavaScript and web development for a more robust

</aside>

<aside> 🛠 실행 화면

(No response)

</aside>

3. 오류 (1) : 유효한 코드가 없음

교사는 ChatGPT가 제공한 코드에서 function callOpenAIAPI() 함수가 실질적인 내용이 없다는 것을 확인하고 구체적인 코드를 작성할 것을 요청하였다. ChatGPT는 새로운 code.gs와 index.html의 코드를 제공하였으나, 이 코드를 응답하지 않았다.

이미지 캡쳐2

<aside> 💬 ChatGPT와의 대화 내용

Researcher :

I don't know how to code, so you have to write it all. Write code.gs and index.html to be a real GPT API based chatbot.

ChatGPT :

Understood, I'll provide you with a basic example of how to set up a real GPT API-based chatbot using Google Apps Script (code.gs) and a simple HTML form (index.html) for the web interface. This example assumes you'll manually handle the API key and other sensitive details securely, especially since directly integrating with external APIs like OpenAI's GPT-3 requires careful handling of authentication keys to avoid exposing them publicly.

Step 1: Google Apps Script (code.gs)

This script will serve as the backend for your web app, handling HTTP GET requests to display the chat interface and HTTP POST requests to send user inputs to the OpenAI API and return responses. Remember, you should replace "YOUR_OPENAI_API_KEY_HERE" with your actual OpenAI API key, which you must keep secure.

javascriptCopy code
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

function getChatResponse(userInput) {
  var apiKey = "YOUR_OPENAI_API_KEY_HERE";
  var url = "<https://api.openai.com/v1/completions>";
  var payload = {
    "model": "text-davinci-003", // You can choose the model you prefer
    "prompt": userInput,
    "temperature": 0.7,
    "max_tokens": 150
  };

  var options = {
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload),
    "headers": {
      "Authorization": "Bearer " + apiKey
    }
  };

  var response = UrlFetchApp.fetch(url, options);
  var responseText = JSON.parse(response.getContentText());

  return responseText.choices[0].text.trim();
}

function doPost(e) {
  var userInput = e.parameter.userInput;
  var botResponse = getChatResponse(userInput);
  return ContentService.createTextOutput(botResponse).setMimeType(ContentService.MimeType.TEXT);
}

Step 2: HTML Form (index.html)

This HTML file will be the user interface for your chatbot, allowing users to submit their queries and view responses.

htmlCopy code
<!DOCTYPE html>
<html>
  <head>
    <title>Chatbot with GPT-3</title>
    <script>
      function submitForm() {
        var form = document.getElementById("chatForm");
        var userInput = document.getElementById("userInput").value;
        google.script.run.withSuccessHandler(function(response) {
          document.getElementById("chatResponse").innerText = response;
        }).doPost({userInput: userInput});
        form.reset(); // Reset the form after submission
        return false; // Prevent page refresh
      }
    </script>
  </head>
  <body>
    <h1>GPT-3 Chatbot</h1>
    <form id="chatForm" onsubmit="return submitForm();">
      <textarea id="userInput" name="userInput" rows="4" cols="50"></textarea>
      <br>
      <input type="submit" value="Send">
    </form>
    <p><b>Response:</b> <span id="chatResponse"></span></p>
  </body>
</html>

Deploying Your Web App:

1. In the Apps Script editor, click Deploy > New deployment.
2. Click Select type and choose Web app.
3. Enter a deployment name and configure who has access to the app.
4. Click Deploy and authorize access if prompted.
5. Once deployed, you'll receive a URL to access your web app.

Security Note:

• Directly embedding your API key in the script (code.gs) as shown above is not recommended for production environments due to security concerns. Consider using environment variables or secure key management services.
• Ensure you comply with OpenAI's usage policies and guidelines.

This setup provides a basic implementation of a GPT-3 chatbot integrated with a Google Apps Script web app. If you're not familiar with programming, handling API keys, deploying web applications, or you're concerned about the security and cost implications of using OpenAI's API, you may want to consult with or hire a developer.

</aside>

<aside> 🛠 실행 화면

</aside>

4. 오류 (2) : 응답 없음 오류가 반복됨.

ChatGPT가 제공한 코드를 실행하여도 응답이 없는 오류가 반복되었다. 교사는 다시 오류 개선 요청을 하였으나 문제가 해결되지 않았다.

이 단계에서 교사는 ChatGPT가 OpenAI의 GPT 기반 챗봇 제작에 대한 지식을 가지고 있지 않을 수 있다고 판단하고 Open AI 회사에서 제공하는 메뉴얼을 탐색하고 다음 대화를 이어 나갔다.