iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
AI & Data

我要成為AI溝通師!30天快速理解Prompt Engineering系列 第 24

DAY24-網頁與OpenAI API的連結

  • 分享至 

  • xImage
  •  

今天一開始我也是屬於一個不知道從何做起的狀態 (根本就是廢物)
所以又双叒叕請出GPT
https://ithelp.ithome.com.tw/upload/images/20231008/20162525K7St1J3UeU.png
https://ithelp.ithome.com.tw/upload/images/20231008/20162525zB8dzFO1gp.png
GPT的回答大致上就是:

第一步:確認是否安裝flask
第二步:利用flask來處理網頁請求
第三步:創建一個叫做 "templates" 的文件夾,將我設計的html模板放入其中

OK,簡單。迷之自信
我們就開始吧


首先第一步
確認安裝
我覺得不需要,我們前面已經安裝過flask了。
難道我們環境都在建假的嗎?
所以直接第二步
創建一個叫做"app"的python檔
然後裡面要有哪些功能呢?
1.API金鑰,以提供連接
2.能讀取我們網頁資料(輸入文本+下拉式選單)
3.傳送讀取內容至OpenAI
4.設置回答的模型參數
5.提取生成文本

大致上,應該要長成這個樣子
https://ithelp.ithome.com.tw/upload/images/20231008/20162525nIMLyJcoUs.png
接下來除了我們的網頁,我們還需要建立一個result的網頁
https://ithelp.ithome.com.tw/upload/images/20231008/20162525yj26ljtTCs.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231008/20162525Wz79Lpl0ml.png
接著將result和我們設計的提問畫面放進"templates" 文件夾
https://ithelp.ithome.com.tw/upload/images/20231008/201625253ghNRkGHX6.png

然後我們就可以去終端機啟動他啦!
接下來的步驟是我debug前的截圖,所以檔名可能跟我上面所說的不一樣
但那真的是我做的!(此地無銀三百兩的感覺)

要記得先到我們存放python檔的資料夾,然後再啟動他
一開始我將我的app.py取名為test.py
https://ithelp.ithome.com.tw/upload/images/20231008/201625255tkIa3EOPz.png
啊哈,忘記下載openai了
再重新來一遍

先下載openai
https://ithelp.ithome.com.tw/upload/images/20231008/20162525SuWU7FpgWd.png

然後再重新啟動一次
https://ithelp.ithome.com.tw/upload/images/20231008/20162525wTaUCXYIGi.png
原本我是想將檔案名保留為project但是他貌似不允許
(我在app.py的檔案裏面也有將index的部分改成project但也不行)
https://ithelp.ithome.com.tw/upload/images/20231008/20162525UjmMISJK81.png
(拍謝,debug的網頁已經連不上了,因為我已經成功了><)

所以我就只能乖乖叫index

全部都改完了之後
再重新執行一次
啟動!
https://ithelp.ithome.com.tw/upload/images/20231008/20162525tDrsZuK984.png
這次有成功導到網頁了
https://ithelp.ithome.com.tw/upload/images/20231008/20162525hJKoLsAbR6.png
但不知道為啥我的小熊跟漂亮字體都不見了/images/emoticon/emoticon02.gif
沒關係,我們先看看輸入餐廳類型他會回答甚麼吧~
https://ithelp.ithome.com.tw/upload/images/20231008/20162525fQ0j2ro61i.png
https://ithelp.ithome.com.tw/upload/images/20231008/201625252Yvbks4KPO.png
/images/emoticon/emoticon04.gif
看來...明天會有續集了呢
呵呵

明天記得回來看看做到底能不能完成吧/images/emoticon/emoticon20.gif
掰掰


上一篇
DAY23-網頁畫面優化
下一篇
DAY25-GPT模型訓練
系列文
我要成為AI溝通師!30天快速理解Prompt Engineering30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言