ChatGPT功能強大，如果能夠導入到自己現有的網站，那會讓網站功能性更強，這個文章要來介紹三個驟，快速簡單的將ChatGPT加入到自己的網站裡。
三個步驟
一、申請ChatGPT API Key
１、請先到這個網站申請ChatGPT API: https://platform.openai.com/account/api-keys (如果你會未有ChatGPT帳號，請先申請一個)
２、接下來會來到API key申請畫面，如下圖。請點選Create new secret key
３、請輸入API key 名稱，如下圖，自己任意取名，不取也可以。
４、完成後就可以拿到API Key，請複製下來，這個API key無法再從網站中取出，所以請務必儲存在自己找到的地方，未來如果忘記的話，必須重新申請(免費）.
附註：
ChatGPT API有三個月18美金的免費試用，超過之後將會根據你的使用量來收費。
二、建立Google 試算表
１、到Google Drive (鏈結)，使用你的Google帳號密碼登入，若沒有Google 帳號密碼，請申請一個。
２、在Google Drive 裡開啟一個新的試算表，並點選工具列裡的Extensions擴充功能，點選Apps Script
3、請在Code.gs 輸入以下的程式
//連結gpt.html
function doGet(){
var file=HtmlService.createTemplateFromFile("gpt");
var evaluate = file.evaluate();
var html=evaluate.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return html;
}
//執行Chat GPT
function generateGPT(){
var sheet = SpreadsheetApp.getActiveSheet()
var data = sheet.getDataRange().getValues()
var apiKey = ""; //********在這裡貼上你的ChatGPT API key*********
var model = "text-davinci-003"
temperature= 0
maxTokens = 2000
var textData=[]
for (var i =1; i<data.length; i++){
var prompt = data[i][0]
const requestBody = {
"model": model,
"prompt": prompt,
"temperature": temperature,
"max_tokens": maxTokens,
};
const requestOptions = {
"method": "POST",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer "+apiKey
},
"payload": JSON.stringify(requestBody)
}
// 抓 OpenAI API
const response = UrlFetchApp.fetch("https://api.openai.com/v1/completions", requestOptions);
var responseText = response.getContentText();
var json = JSON.parse(responseText);
textData.push ([json['choices'][0]['text']])
}
sheet.getRange(2,2,textData.length,1).setValues(textData)
}
// 加入資料到試算表
//資料加到同一個cell
function addRecord(uid) {
var app = SpreadsheetApp.getActiveSpreadsheet();
var spreadsheetName = app.getSheetByName("GPT"); // 試算表名稱為GPT
var cell = spreadsheetName.getRange("A2");
cell.setValue(uid);
generateGPT();
var lastRow=spreadsheetName.getLastRow();
var getResults=spreadsheetName.getRange(lastRow, 1, lastRow, 2 ).getValues();
return getResults;
}
4、建立一個gpt.html檔案，複製貼上以下的程式：
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<!-- Bootstrap Library Here -->
<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" />
<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>
<style>
.container {
width: 90%;
}
#uid {
width: 100%;
border: 2px solid blue;
background-color: #d1ffd4;
}
.btn-primary{
width: 100px;
background-color:green;
}
#displayGTPHere {
/* background-color:lightgray; */
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
height: 200px;
border: 1px solid lightgray;
overflow: auto;
color: black;
font-size: 14px;
margin-top: 20px;
}
#copyBtn {
width:90%;
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<h2 style="text-align: center; margin: 30px">C w C ChatGPT</h2>
<div class="container">
<form class="d-flex">
<input class="form-control me-2" id="uid" name="id" type="search" placeholder="您要問什麼？" aria-label="Search" />
<input class="btn btn-primary" id="addBtn" name="btn" type="button" value="詢問" onclick="addRow()" />
<div id="loading" style="display: none">
<img style="width: 50px; height: 50px" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_632/04de2e31234507.564a1d23645bf.gif" alt="Loading..." />
</div>
</form>
<div id="displayInfo" style="color: gray; background-color: lightyellow; margin: 5px; width:90%"></div>
</div>
<div id="displayGTPHere"></div>
<button id="copyBtn" class="btn btn-primary" onclick="copyText()">複製文字</button>
<script>
function addRow() {
//抓輸入搜尋資料
var uid = document.getElementById("uid").value;
document.getElementById("addBtn").disabled = true;
document.getElementById("addBtn").value = "查詢中...";
//確認是否有輸入資料
if (uid != "") {
// Condition 1: 成功
//顯示查詢訊息
var loading = document.getElementById("loading");
loading.style.display = "block";
document.getElementById("displayInfo").innerHTML = "";
//輸出搜尋資料
google.script.run.withSuccessHandler(function(return_string) {
document.getElementById("displayInfo").style.display = "none";
var displayGPT = "<div class='container-gpt'>";
displayGPT += "<span style='color:gray;'>" + return_string[0][0] + "</span><br>";
displayGPT += "<span >" + return_string[0][1] + "</span>";
displayGPT += "</div>";
document.getElementById("displayGTPHere").innerHTML = displayGPT;
loading.style.display = "none";
document.getElementById("addBtn").disabled = false;
document.getElementById("addBtn").value = "詢問";
document.getElementById("displayInfo").style.display = "block";
})
.addRecord(uid);
} else {
// Condition 2: 如果未輸入資料
document.getElementById("displayInfo").style.display = "block";
document.getElementById("displayInfo").innerHTML = "請輸入詢問內容";
document.getElementById("addBtn").disabled = false;
document.getElementById("addBtn").value = "詢問";
}
}
//按下enter可以執行submit button
var input = document.getElementById("uid");
input.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
event.preventDefault(); // 避免送出
// 執行
document.getElementById("addBtn").click();
}
});
function copyText() {
var text = document.getElementById("displayGTPHere").querySelector('span:last-child').innerText;
navigator.clipboard.writeText(text);
document.getElementById("displayInfo").innerHTML = "複製成功！";
}
</script>
</body>
</html>
完成後請儲存，接下來要執行
三、取得URL，即可加入你的網站！
這裡分享三個可以加入網站的方式，分別為，請看影片來瞭解如何簡單的將取得的ChatGPT URL加到你的網站
Google Sites
WordPress
自己的網頁
<!-- 在src貼上你的Google Apps Script URL -->
<iframe
src=""
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"
>
</iframe>iframe美化的CSS程式
<style type="text/css">
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>