<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>茶米老師 &#8211; 科技島-掌握科技新聞、科技職場最新資訊</title>
	<atom:link href="https://www.technice.com.tw/tag/%e8%8c%b6%e7%b1%b3%e8%80%81%e5%b8%ab/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.technice.com.tw</link>
	<description>專注於科技新聞、科技職場、科技知識相關資訊，包含生成式AI、人工智慧、Web 3.0、區塊鏈、科技職缺百科、生物科技、軟體發展、雲端技術等豐富內容，適合熱衷科技及從事科技專業人事第一手資訊的平台。</description>
	<lastBuildDate>Mon, 11 Mar 2024 08:59:29 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.2</generator>

<image>
	<url>https://www.technice.com.tw/wp-content/uploads/2022/12/cropped-wordpress_512x512-150x150.png</url>
	<title>茶米老師 &#8211; 科技島-掌握科技新聞、科技職場最新資訊</title>
	<link>https://www.technice.com.tw</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【課堂筆記】用Open AI API的魔法鑰匙，打開ChatGPT的開發大門｜黃信溢 (11/28)</title>
		<link>https://www.technice.com.tw/classnotes/83038/</link>
					<comments>https://www.technice.com.tw/classnotes/83038/#respond</comments>
		
		<dc:creator><![CDATA[abc]]></dc:creator>
		<pubDate>Tue, 28 Nov 2023 08:18:23 +0000</pubDate>
				<category><![CDATA[課堂筆記 - AI學院]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[ChatGPT]]></category>
		<category><![CDATA[Sapphire Rapids 處理器]]></category>
		<category><![CDATA[人工智慧]]></category>
		<category><![CDATA[茶米老師]]></category>
		<category><![CDATA[課堂筆記-工作效率]]></category>
		<guid isPermaLink="false">https://www.technice.com.tw/?p=83038</guid>

					<description><![CDATA[<p><img width="1365" height="768" src="https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="1128 黃信溢" decoding="async" srcset="https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢.jpg 1365w, https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢-300x169.jpg 300w, https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢-1024x576.jpg 1024w, https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢-768x432.jpg 768w, https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢-390x220.jpg 390w" sizes="(max-width: 1365px) 100vw, 1365px" title="【課堂筆記】用Open AI API的魔法鑰匙，打開ChatGPT的開發大門｜黃信溢 (11/28) 1"></p>
<p>隨著ChatGPT的出現，我們常聽到有許多個人或公司行號串接了ChatGPT的API來開發他們的軟體，讓這些軟體都具備ChatGPT強大的語言功能。但到底什麼是API呢？API（Application Programming Interface，應用程式介面）其實就像是應用程式間的橋樑。<content><!-- wp:image {"id":83180,"sizeSlug":"large","linkDestination":"none"} --></p>
<figure class="wp-block-image size-large"><img src="https://www.technice.com.tw/wp-content/uploads/2023/11/1128-黃信溢-1024x576.jpg" alt="" class="wp-image-83180"/></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><strong>講師：黃信溢</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>茶米老師，專業電腦圖書作者與資訊教育講師，擅長於AI人工智能、程式設計、雲端開發、多媒體影音製作以及網路行銷等跨領域主題。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>曾在多家知名企業和教育機構擔任關鍵角色，致力於教育培訓及內容創作。擁有豐富的教學經驗，善於以生動活潑的實作範例，引導學員由淺入深建立紮實技能。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><strong>一、什麼是API？</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>隨著ChatGPT的出現，我們常聽到有許多個人或公司行號串接了ChatGPT的API來開發他們的軟體，讓這些軟體都具備ChatGPT強大的語言功能。但到底什麼是API呢？API（Application Programming Interface，應用程式介面）其實就像是應用程式間的橋樑。我們可以透過API將原應用程式的資源開放出來讓他人使用，降低開發的門檻並提升開發的效率。也就是說，當我們想開發一個客服機器人，那麼我們可以帶入ChatGPT的API，透過這個橋梁將客戶的問題傳回ChatGPT的大型語言模型，再回傳回應給我們。另外，本次課程所示範的API串接案例，主要會使用requests模組。這個模組為Python中的模組之一，主要用於發送HTTP的請求來取得伺服器的回應。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>在進入OpenAI的API使用前，我們將先透過簡單的API串接練習，了解如何串接API。以串接產生隨機狗狗圖片網站的API為例，我們可以在Dog API網站上（https://dog.ceo/dog-api/）找到其json網址。我們可以將該網址丟上Json Viewer（https://codebeautify.org/jsonviewer）的網站上分析（圖1）。我們將會在等一下串接API的過程用到分析的結果。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/3bJL5qS3tfDuGOQ7GRcOjATLdM7rzzFz_zNM5DJTpiRRdXvPo8PrAg3xNnBKN2PuhhFfVarlwz-Ti4-OzAFXNG9dBqlzfSVEhaZeWbV0AcQRpxik74J1MfIs5PNwnPKb9GbMqYSHgdL6M9X341eWDV4" alt=""/><figcaption class="wp-element-caption">圖 1 ：JSON Viewer網站。我們可以將隨機狗狗圖片的Json網址貼到左方欄位，就可以在右方欄位得到解析結果，供我們接下來寫程式用。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>接著，我們要將隨機狗狗圖片網站的API網址複製下來，並打開Google Colab開始寫程式。首先，我們要帶入requests模組，所以要先在第一行輸入import requests表示要使用requests模組。接著於第二行輸入url = "https://dog.ceo/api/breeds/image/random"將網站的API網址帶入程式碼，再於下一行輸入r = requests.get(url)，表示要從貼上的網址取資料。最後在於下一行輸入r。按下左側的執行鍵後，如果出現&lt;Response [200]&gt;的HTTP狀態碼，代表程式讀取成功。如果我們想要讀取內容，則可以另外開啟一個程式碼儲存格後，輸入r.text並開始執行。接著我們就可以得到一串網址，而我們必須將這段網址解析成json格式。我們可以從圖1的json Viewer解析中看到，「message」的部分有一串網址，而這裡便是我們要讓我們的程式取的資訊的地方。因此，我們必須先在新的程式碼輸入框中輸入 datas=r.json()，並在第二行輸入datas[‘message’]。最後，我們再輸入from IPython.display import HTML，並在下一行輸入HTML(f"&lt;img src={datas['message']}&gt;")，就可以在執行程式碼後隨機得到一張狗狗圖片囉（圖2）！</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/YpUbMCQspry0ceUOm6_F2lwIyim5QIFkP3oHDuDBLk_SPGosIgvygZd11nkJRBjmzPTqwYTlta4l8vsoRTcaOP4w0lEPZ9LBMiWGbDFM7cQnKw1qpGUq5YrOrMh9ualPsPf1Wjlxr0vbJHcibzRqjZ4" alt=""/><figcaption class="wp-element-caption">圖 2： 當我們完成最後一步後，程式就會利用Dog API網站的API讓我們隨機得到一張可愛的狗狗圖片。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>從以上範例我們可以看到，當有了API之後，我們就可以快速地取得API原網站的服務。接下來我們將告訴大家如何串接OpenAI的API，讓我們可以在自己或公司開發的軟體上，也能享受ChatGPT強大的語言功能。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><strong>二、OpenAI的API使用</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>OpenAI的API必須付費才能使用，我們可以進入OpenAI開發者介面（https://platform.openai.com），並從左方選單的「Usage」看到自己是否有足夠的錢可以使用。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:list {"ordered":true} --></p>
<ol><!-- wp:list-item --></p>
<li><strong>取得API Keys</strong></li>
<p><!-- /wp:list-item --></ol>
<p><!-- /wp:list --></p>
<p><!-- wp:paragraph --></p>
<p>雖然每個人都可以申請API Keys，但必須要付費才可以真正使用它。而API Keys的收費方式是採「用多少，收多少」的模式，因此對於目前我們使用的開發程度來說，其實費用相當低。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>那麼我們要怎麼取得API Keys呢？我們可以在OpenAI開發者介面中的左側選單選擇「APIkeys」，並選擇「+ Create new secret key」，就可以開始產生金鑰囉（圖3）！</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/YE6VIcTyGx9SidBD7INngvAO2gObRhPR5ypfndlDOHO19e_P9RqSd1Iyg3KZb01Fn0DCI4YU4SWOxqFmHdk7kwoF-_0o_njohHFgnEKUdp3WCvAl0xbvMtZ8SQXnxm2bsvYRUmZCucAWBmz2Qz4D6Ic" alt=""/><figcaption class="wp-element-caption">圖 3： 進入OpenAI開發者介面後，點選左側選單中的「APIkeys」並選擇「+ Create new secret key」，就可以開始產生金鑰。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>接著，我們只要輸入金鑰名稱，系統就會產生一串網址，也就是我們的API Keys。提醒大家，這組API Keys的網址只有在創建的當下才會看到，選擇「Done」之後就會消失，所以一定要記得將它複製並記錄下來！</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:list {"ordered":true,"start":2} --></p>
<ol start="2"><!-- wp:list-item --></p>
<li><strong>串接API Keys</strong></li>
<p><!-- /wp:list-item --></ol>
<p><!-- /wp:list --></p>
<p><!-- wp:paragraph --></p>
<p>有了API Keys後，我們就可以開始串接API了。首先，我們要先到OpenAI開發者介面的左側選單中打開「Playground」，並將右側「Model」設定為「text-davinci-003」。接著，再點選右上方的「View code」選擇「python」，並將python的語法複製下來（圖4）。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/6EbyBuTh8BpKkrz-KCFEp0yqQRQk6voAdd6PGqK2I3nnZnVdPdrpbj8b8jLO33LD6zvqArFj2ruD2Mif1IIyHfLF6scpuR1FlXAmzHu-8Ea_z7pStuo6lBEYQ_x9AjRnhUMjYoX3nhCLjTsxIgX7cWo" alt=""/><figcaption class="wp-element-caption">圖 4：進入「Playground」後，要將「Model」設定為「text-davinci-003」，並在右上方「View code」中選擇「python」，就可以得到python語法。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>接下來，我們就可以回到colab開始寫程式。由於我們要使用OpenAI的模組，所以必須先輸入!pip install openai來安裝模組，輸入完成後點選執行。完成後，再將剛才複製的python語法貼上colab。接著，我們必須將自己的API keys網址貼入程式碼中（圖5）。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image {"id":88872,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.technice.com.tw/wp-content/uploads/2024/01/image.png" alt="" class="wp-image-88872"/><figcaption class="wp-element-caption">圖 5 ：貼上程式碼後，我們必須將自己的API Keys貼上圖中的紅框部分進行串接。<br /></figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>而這段程式碼中的「prompt」就是輸入問題的部分，我們可以任意輸入問題，並點選執行。執行成功後，就會得到回應。如果我們要拿到純文字的解答，可以輸入print(response.choices[0].text.strip())，就可以得到單純文字的回應（圖6）。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/oxy15mTy4rro87KUqVh5gRKfMqcLjWiclX2aKZ4QyZlCG1EN-fkjtfzZr9VtOmS3P1STzs6TsmOddJeoiy7TIKyxvdaN_FqwuR_-KCTd8-E_YBg-fgXMLqx99QTNqmKXKPf5fHorpG0Nb-IiFEgJusQ" alt=""/><figcaption class="wp-element-caption">圖 6：我們在prompt後面輸入問題並點選執行後就會得到回應。若要單純得到文字回應，則可以修改「response」的程式碼（如圖紅框部分）。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>接下來，我們要將它變成一個互動程式。我們只需要開啟新的程式碼輸入區，並輸入q = input("請輸入你的問題：")，並貼上圖5中程式碼response以下的部分。接著，再於下一行輸入print(response.choices[0].text.strip())，就可以完成一個簡易的互動程式（圖7）。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/sZn_TMcjysvrOm7pYydaGkVeMoXhhu0qcn62Zx8y6x8siOI1Q5IHjSYRPjTvhYXFhLCyf2ZbocQKrf2mI9VvijC6ud5b7JTdDPUee4dFoH5Gsei0Ed4XQXvGBqr1RL06-3POKDOt0Q3yvT1VWSAbwZc" alt=""/><figcaption class="wp-element-caption">圖 7：當我們寫完簡易互動程式的語言後，就可以得到一個已經串接OpenAI API Keys的互動程式。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>最後，為了能讓使用者也能在手機上享受ChatGPT的服務，我們要利用gradio幫助我們達成此目標。首先，我們要先另闢一個程式碼輸入區，並輸入def askchatgpt(q):，把剛才的程式碼內容變成自訂函式，再將剛才response以下的程式碼內容貼上並凸排。提醒大家，原本回應的程式碼為print(response.choices[0].text.strip())，但在自訂函式中必須修改為return response.choices[0].text.strip()（圖8）。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/5Qi24DMNfcHqtF_gwA2fBbrxgFiyx1s9buK4Xe7Pv2HubnMYH5bwPMufJ9tRPHSmIaiQOZPB0pGbF_IjbsOhHJARwL87kNht--uoNTNDTCTLcgLYTSQy6O4x2hJm75iCBRficoMRa49GdktPRXkp-q4" alt=""/><figcaption class="wp-element-caption">圖 8： 撰寫自訂函式。大家要注意，原本回應部分的程式碼為print(response.choices[0].text.strip())，但在自訂函式時必須更改為return response.choices[0].text.strip()。</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>接著，我們要建立輸入問題的部分，所以需在下一行輸入q = input("請輸入你的問題：")，並再於下一行輸入print(askchatgpt(q))。完成上述步驟後，我們就可以將它寫成手機程式囉！首先，我們要開啟新的程式輸入區，輸入圖9中的程式碼。我們可以在title部分自行設定機器人的顯示名稱。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:image --></p>
<figure class="wp-block-image"><img src="https://lh7-us.googleusercontent.com/4h9_Jvv-3PYWnWZ5bxw-GUaPOH35IuEqUXf5D68EQ-_2v4J6jPdlK_bGKEoTyIj3CXCf4L6D-lEnt2rsxg3ENWuTvFwvreUdMgq2fgrVLBdU58jBdfjme58Hri-2Zx3x2MAImPDgrMNbkEbcVJE_Hno" alt=""/><figcaption class="wp-element-caption">圖 9 ：上圖為gradio程式碼，透過這個程式碼，我們就可以在手機上使用ChatGPT聊天機器人囉！</figcaption></figure>
<p><!-- /wp:image --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>最後，我們可以打開gradio程式碼執行完成後產生的網址，就會直接跳出一個gradio介面。我們點選網址旁邊的分享圖示取得QR Code後，就能夠在手機上操作我們剛剛所創建的ChatGPT聊天機器人了。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>以上就是如何串接OpenAI的API教學，希望大家可以利用OpenAI的API，提升開發的效率，並打造出一個也有ChatGPT強大語言功能的軟體喔！</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>【若想回顧完整版課程影音，請點選<a href="https://www.1111gpt.com.tw/2023/06/17/work_with_chat-gpt_efficiency_improvement/" target="_blank" rel="noreferrer noopener">此</a><a href="https://www.technice.com.tw/review/83291/" target="_blank" rel="noreferrer noopener">連結</a>；有任何問題或分享，也歡迎在本文底下留言。】</p>
<p><!-- /wp:paragraph --></content></p>
<p>這篇文章 <a rel="nofollow" href="https://www.technice.com.tw/classnotes/83038/">【課堂筆記】用Open AI API的魔法鑰匙，打開ChatGPT的開發大門｜黃信溢 (11/28)</a> 最早出現於 <a rel="nofollow" href="https://www.technice.com.tw">科技島-掌握科技新聞、科技職場最新資訊</a>。</p>
]]></description>
		
					<wfw:commentRss>https://www.technice.com.tw/classnotes/83038/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
