跳到主要內容

發表文章

目前顯示的是有「API」標籤的文章

[野人獻曝] 串接 OpenAI 的 Assistant

你就直接把 Assistant 當成你在 ChatGPT 看到的那些 GPT 玩具吧(?), 只是你可以透過 Assistant API 透過程式化來建立你的 GPT 並與你的網站功能結合。 雖然前面說了「用 Assistant API 」,但實際上其實需要以下三個類型的 API 相互結合才能生出一個 Assistant: Assistants API :設定給助手(?)的指示內容、要使用的模型等資訊。在絕大部分場合下,你通常只需要呼叫一次 Assistant 的 Create 方法一次,此後就可以把回傳的 id 記錄下來後用在其他地方。 Threads API : 建立對話串,這個對話串會與前述的 Assistant 相互結合,讓 Assistant 知道要在這個 Thread 開始監聽訊息,並針對指示做出相應的回覆。 Messages API :將使用者輸入的訊息送到 Thread Runs API :使用者送出訊息後,就要呼叫 Create Run ,讓後端知道有工作要做了 以下是其流程: 先呼叫 Assistant API 的 Create ,記得要拿到回傳中最重要的 id ,這會在接下來的步驟中使用到。如果沒什麼特殊狀況的話你可以把這個 id 持久化保存,之後就不用再重做一次這個步驟。 接著 建立一個新的 Thread ,並取回其中回傳的 id。這個步驟你可能會因應不同的使用的而需要頻繁產生。 以上兩個步驟完成後,接著就可以: 建立一條新的 Message ,並將使用者輸入的內容發送至剛才建立的 Thread 中(透過之前建立 Thread 成功所得到的 id) 接著 呼叫 Run API 的 Create ,將建立 Assistant 與 Thread 成功時所取得的 id 帶入後,就會開始根據使用者輸入的內容開始做分析處理。若是忘記呼叫這個 API 你會發現怎麼內容輸入了但卻沒有任何回應。 然後就可以定期去 呼叫取得 Run 資訊的 API ,看看是不是已經處理完畢。只有在 status 是 completed 時,才代表執行完畢。 執行完畢後,就可以 透過 Message API 取得訊息 。 看吧,很簡單吧? ㄍㄋㄋ,官網沒寫詳細用法只有提供 endpoint 資訊。害我先按照自己的想法寫出一個雛形發覺怎麼跑不起來一邊確認一邊問 ChatGPT...

[野人獻曝] Google Picker

昨天空閒時刻在 Google API 頁面逛著逛著看到 Google Picker 這個玩意。 仔細看了頁面說明, Google Picker 這玩意的首頁就直截了當說了: Google Picker is a "File Open" dialog for the information stored in Google servers. With Google Picker, your users can select photos, videos, maps, and documents stored in Google servers. The selection is passed back to your web page or web application for further use. 既然他這麼好用, 想當然爾就刺激了我的技術魂, 所以昨天晚上稍微看一下文件後就寫了一個簡單的Sample了。 如果想試玩的話,請往 這裡 。 ======以下技術解析一下===== 基本上要用這玩意,實在是非常簡單。 只要先開這兩行: <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('picker', '1', {'language':'zh-TW'});</script> 這樣就會先把Google Picker的程式碼先引入了。 然後以Google所提供的慣例中所展示的, 他是在頁面loading完後跳出對話框。 但是以我的sample言, 是在每一個連結被點擊時才觸發, 這點要先注意一下。 接著就是寫被觸發後的處理, 基本上都是以 google.picker.PickerBuilder 物件為主, 因此我們可以這麼寫: var picker = new google.picker.PickerBuilder().addView(google.picker.ViewId.IMAGE...

[野人獻曝] 淺談oEmbed機制

你或許會很好奇, 為啥我在 plurk 上貼一個 youtube 連結後, plurk會把他轉換成其他人只要一點開就能播放且有縮圖的連結; 或者是你貼了一個flickr連結後, plurk會幫你轉換成那張圖片,並且設定好連結。  這些(大概)都是透過oEmbed這個機制所弄出來的。 (因為我又沒問plurk的人是怎麼弄的w)  那什麼是 oEmbed 呢, 詳情請翻翻看 維基百科 上的說明。 如果不想看的話, 這裡就簡單一點說:「oEmbed是個開放格式,可以讓你知道想要的東西資源在哪裡該如何使用blahblah」。 至於詳細內容在上面所提及的oEmbed官網大概就提的差不多了, 所以請務必看看(不然我也沒打算再說更多了)。  所以說該怎麼實作勒? 就以實作Youtube的以oEmbed取資源為例, 首先你必須要知道Youtube的oEmbed資源在那個Uri, 基本上你可以在 Youtube這篇部落格文章 找到, 不過我可以先貼出來參考: http://www.youtube.com/oembed?url={youtube影片網址}&format=json  當你組出這段網址後, 你可以用你上手的語言去作一個http get的動作, 如果順利的話, 你的程式應該會收到一段json, 至少會有type、version、title等元素, 請參照oEmbed官網中所提及的response type,  去取用你所需要的項目, 就算是大功告成了。 行文至此應該會有人要問:「那我怎麼知道哪些網站有支援這個機制?」 基本上幾個比較大手的網站都已經實做這種格式了, 你可以在oEmbed的官網首頁的最後部份看到那些網站的清單。 當然oEmbed還有一個Discovery機制, 也可以讓你知道這個網站是否支援, 只是因為本期稿擠(實際上是天氣好熱不想多打字), 所以改天有機會再來開新文說明好了。 

[野人獻曝] reCAPTCHA的使用 - 前端部份

現在網站為了避免不必要的機器人進行一堆操作, 大多會要求使用者輸入指定圖片中的文字, 以作為對人類的考驗(?)。 若是操作者答錯的話, 程式端會認為彼端的操作者不是人類而是機器人就會拒絕接下來的操作。 這就是一般所稱呼的 CAPTCHA 。 當然啦, 隨著製造程式機器人的成本變低, 現在隨時都有一堆機器人覬覦某些網站, 被這些機器人盯上的話輕則被挖資料,重則...... 所以你或許有需要評估一下在自己的網站上使用CAPTCHA機制的需要性。 這也就是寫這篇文章的原因。 回到主題, 本文主要是講述 reCAPTCHA 在自家網站的應用。 那麼就開始教學(?)吧。 請先到 reCAPTCHA的網站 申請一組key(包含公鑰和私鑰其功能下述), 申請完成後, 你可以到 這裡 抓個語言使用的plugin檔案, 並且應用在你的網站之中, 其使用方法在Google所提供的文件中都有述及, 所以就根據你常用的語言自己去參考文件吧~ (如果還有機會的話)下一篇會說明怎樣客製化這個reCAPTCHA輸入框, 以便符合你網站上的風格。

[野人獻曝] 使用YQL取得網頁某區塊的元素內容

Yahoo! Query Language (YQL)正如其名, 她是Yahoo的一個查詢語言, 你可能會覺得她跟 SQL 很像, 事實上她確實就是用SQL的語句結構來做查詢。 至於YQL的可以查詢的項目有什麼呢? 除了Yahoo!自家的flickr公開相片等, 她也可以查詢rss、html元素、json或xml資料等, 所以她的功能是很強大的, 如果運用得宜的話,其實可以減少 我們做壞事的 很多時間。 話回到主題, 這次是要示範利用YQL找出網頁某元素, 因此我就以 Pixiv 的圖片頁作個範例吧。 一般來說,在未登入時, 連到 Pixiv圖片頁 時, 會顯示中尺寸的圖片並要求登入。 對操作電腦的人類而言, 我們可以對著那張圖片按下右鍵並選擇「內容」(或「圖片資訊」)之類的字眼得知圖片網址。 但是對於非人類的程式呢? 那你可能要讓程式去把資料抓回來, 然後使用正規式去抓出那張圖片的網址, 但這種事對於人類而言是很麻煩的。 (雖然我自己可以勉強說懂一點點正規式,但是我還是不會寫這種玩意。) 使用YQL可以讓我們很方便且簡單的取得這些資訊, 我們只要讓程式呼叫她的API, 就可以省下很多功夫。 那麼就開啟 YQL的測試台 來開始體驗吧。 在連線完成時, 你會看到輸入框中的文字是 show tables , 這就是YQL的語句, 跟SQL幾無二致。 這句語句的意義就是「顯示所有可使用的table」, 而這裡所指的table就是網路上的各種資源。 等到未來你更瞭解YQL就會懂的(茶) 接下來,請在文字輸入框輸入以下這串YQL語法吧, 這是為了要試試YQL的強大唷^. select * from html where url="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=18001902" and xpath='//div[@class="front-centered"]/a' 此句語句若是翻成中文的就是代表: 在html資料表中查詢網址是「http://www.pixiv.net/member_illust.php?mode=medium&illust_id=18001902」 且xpath是「//div[@cl...

[野人獻曝] 用 Amazon S3 儲放你的檔案

Amazon S3 是一個由Amazon所提供的檔案儲存服務, 基本上也出來很久了, 所以這裡我不會 也不想 介紹太多細節! 如果你對這有興趣的話,可以先註冊AWS帳號後再繼續看下去。 (不過這需要信用卡,換言之,是要收費的,所以......沒信用卡的就掰掰了) 那麼以下我就以PHP來略為說明怎麼實作一個簡單的上傳程式吧。 首先,你可以先到 這裡 下載Amazon S3 PHP Class, 下載解壓縮至網站目錄後(請記住你把檔案放在那個目錄), 打開你的程式編輯器, 先輸入以下的HTML吧: 這段HTML主要是為了讓我們建立一個可供上傳檔案的表單, 如果不熟悉的話,建議還是找本HTML的入門書吧, 所以這裡就簡單帶過了。 接下來是後端程式的部份, 為了方便起見,你可以直接寫同一隻程式中 ... if (isset($_FILES['photo'])) { require 'S3.php'; // 基本上路徑就請你自己去處理啦!為了要操作S3你必需要引入這個檔案 // AWS_ACCESSKEY和AWS_SECRETKEY是你的AWS登入金鑰(?),你可以在AWS帳號中心中看到這些資訊 S3::setAuth(AWS_ACCESSKEY, AWS_SECRETKEY); // 新增檔案籃,基本上你可以把他當成一個裝滿檔案的藍子,到時要取用這個籃子內的檔案可以用 http://my-test.s3.amazonaws.com/{檔案路徑}來存取 // 第二個參數代表是這個檔案籃可被公開讀取 S3::putBucket("my-test", S3::ACL_PUBLIC_READ); // 將檔案傳至my-test這個檔案籃中 S3::putObjectFile($_FILES['photo']['name'], "my-test", $_FILES['name'], S3::ACL_PUBLIC_READ); } ... 這是比較粗略(而且還有一堆錯)的程式碼, 但總的來說, 整個流程不外乎就是: 伺服端接收客戶端所傳來的檔案內容 接收後進行處理(可能是將...

[野人獻曝] Google Virtual Keyboard

老實說, Google 的 Virtual Keyboard Element 出來也有段時間了, (不知道那是什麼請參閱上行連結,這裡就不說明了) 因此現在才說說這個玩意其實是腿很大了。 不過剛剛整理自己寫的東西時偶然看到這個玩意, 所以就寫出來 充稿數 好了。 基本上,她的實作很簡單, 所以我提供一份很簡單的 範例 就好了。 在實作的時候, 你還需要注意一些事: 虛擬鍵盤 僅支援英文、韓文 等語言,所以日文和中文等就沒用了 密碼欄位目前無法使用虛擬鍵盤 嗯~大概就是這樣了吧......(茶)

「無聊的小東西」將Google Maps充滿整個網頁

其實這東西對網頁老手應該不算什麼, 不過對於一堆網頁開發新手可能還有點用, 所以我就稍微寫一下好了(謎:想要騙流量的)。 基本上這只是運用jQuery在網頁的主要元素載入後, 即時去運算當前網頁的可視寬高, 並且將這兩個資訊以css寫入該區塊。 以下提供的範例主要流程為: 利用google.load載入Google Maps API和jQuery 網頁載入主要區塊(本例中的主要區塊ID是 myMap) 算出網頁的可視寬高值,並寫入myMap區塊的css) 參考程式碼

[野人獻曝] 使用rpxnow替你的網站作登入服務

本回要來示範如何使用 rpxnow 的服務, 讓你的網站可以使用 Facebook 、 Twitter 及 Google 等帳號作登入(茶)。 首先第一步, 你必須要到 rpxnow 使用你的 Google 等帳號登入後申請一個 app, 這樣你才可以繼續接下來的步驟。 以上步驟完成後, 你應該會得到一個 apiKey。 然後請到 Signin Setup, 取得嵌入你網站的Code。 這嵌入的Code有分兩種, 一種就是iframe式的, 另外一種就是blockUI式的, 基本上只跟外觀有關係, 你可以根據自己需求選擇。 取得那段HTML Code後, 請把他放在你要使其出現的地方上, 並且確定接收Token的程式沒有問題就可以作登入了。 ==== 接下來比較重要 ==== 上面比較簡單所以就大概帶過, 接下來要說明接收token的方法了。 示範程式碼 以PHP實作, 如果要其他語言的,請自行想辦法。 好~這樣簡單的登入服務就完成了。 不過要注意一下,這種服務可能還是會有隱私權的問題, 所以如果網站成長到一定程度或許就要考慮直接套用各大網站的登入服務API, 而不應該使用這類服務。

[野人獻曝] 讓phpbb3顯示維護訊息

其實每一個網站都會有維護的時候啦, 維護的原因可能是因為資料庫掛了啦還是要備份資料庫之類的, 不過這些操作都不大能在還有使用者在線上的情況作...... 所以才需要放個頁面, 提醒使用者「網站維修中,別想在這裡繼續操作了啦」(大笑) 以下是實作這個維護頁的方式: 自己作一個HTML頁面,載明要維護的時間,還有什麼鬼的訊息,然後存在一個你記得路徑的地方,這個路徑建議是phpbb的根目錄啦,因為會比較好記;當然也可以擺在其他地方啦。總而言之,擺在哪裡是你的事XDD 打開phpbb根目錄下的config.php,加上一行  define('MAINTAIN_MODE', true); 打開phpbb根目錄下的includes/functions.php,找到page_header這個函數,在這個函數的開頭處加上 if (MAINTAIN_MODE) { require 維護提示頁的路徑; exit(); } 這樣就完工了! 往後若又要進行「維護」的話, 把config.php的MAINTAIN_MODE調成true就會出現維護頁了~ 「如果我想只讓我自己一個人還能進行操作,而其他人不行時呢」 (通常是在進行程式修改時啦) 一樣在config.php中加入IP條件判斷, 如果連線進來的IP是你自己的,則define('MAINTAIN_MODE', false);

[野人獻曝] Yahoo! 斷章取義API範例程式碼(PHP版)

Yahoo! 斷章取義API測試程式碼 我的測試網站 這是今天看到 xdite 大大放出來的消息, 所以寫出來的程式碼。 如果不嫌棄的話,可以參考一下我的程式碼實作。 但是請注意,你一定要申請一個Yahoo!的API帳號,而且還要啟動它, 這樣程式才會正常運作喔! Technorati 標籤: PHP , Yahoo! API