前言近期有使用 Line Bot 完成一個小小專案，但是又想告一些花樣就把ChatGPT 加入Line 中，唯一區點就是要注意Token 使用量。 Token 使用量GPT 有很多版本 (光GPT 也不知道他已經多少版本)，串接過程其實有聽過 Token 次數，依據每個版本不同 Token 數就會不同。例如 : GPT-3 每一個 Token 為 4 個char 或是 0.75 個字。目前 GPT-3 只有提供最大 4,096 tokens，如果超過就會無法正常使用。 首次使用chatGPT 提供免費 18 美元的費用，這三天玩下去還沒花到 1美元，若直接把他當簡易的搜尋工具他是相當翻遍許多。 GPT API 申請Open API : https://platform.openai.com/ 申請方式只需要按下 “Create new secret key” 即可。 Library這邊是已經有提供 Library 可以馬上實現，Line 部分我使用 Betalgo.OpenAI.GPT3製作，製作方式很簡單這邊就不介紹操作。 入口 : https://platform.openai. ...

DI 依賴注入（Dependency Injection）DI（Dependency Injection）是一種設計模式，它的主要目的是降低軟體元件之間的耦合度，讓程式更容易測試和維護。DI 透過將類別所需的相依物件，由外部傳入，讓類別不需要知道相依物件的實作細節，只需要知道相依物件所提供的介面（interface），就可以正常運作。 生命週期在 DI 中，相依物件的生命週期通常由 DI 容器來管理。一般來說，每個類別在 DI 容器中都會有一個對應的生命週期。常見的生命週期有以下幾種： Transient：每次注入都會創建一個新的實例。 Singleton：整個應用程序只會創建一個實例。 Scoped：在同一個作用域中只會創建一個實例。 使用規則使用 DI 時，有幾個重要的使用規則： 盡量避免在程式碼中直接 new 物件，應該使用 DI 容器來管理物件的生命週期。 相依物件的注入應該使用介面（interface）而不是具體類別（concrete class）。 相依物件的注入應該在建構子（constructor）中完成，而不是在類別的方法中完成。 相依物件的注入應該由 DI 容器 ...

編程模式（Programming patterns）是一種在軟體工程中使用的解決方案，它可以解決特定的問題，並經過反覆證實可行。這些模式是由軟體工程師在長時間開發軟體中所經驗到的最佳實踐，並且被廣泛使用。使用這些模式可以使代碼更加可讀、可維護和可擴展。 編程模式可以分為三類 創建型模式（Creational patterns） 結構型模式（Structural patterns） 行為型模式（Behavioral patterns） 創建型模式這些模式主要用於將對象的創建與使用分離開來。其中比較常見的模式有工廠模式（Factory pattern）、抽象工廠模式（Abstract Factory pattern）、單例模式（Singleton pattern）、建造者模式（Builder pattern）和原型模式（Prototype pattern）。 結構型模式這些模式主要用於將對象和類結構化，以更好地進行組織和管理。其中比較常見的模式有適配器模式（Adapter pattern）、橋接模式（Bridge pattern）、裝飾模式（Decorator pattern）、外觀模 ...

Visit Japan WebVisit Japan Web 是由日本政府推出，可以從上面填寫檢疫、入境、申報等手續。目前有成田國際機場、羽田機場、關西國際機場、中部國際機場、福岡機場、新千歲機場、那霸機場可以使用 Visit Japan Web 檢疫。 網址 : https://vjw-lp.digital.go.jp/en/ 一、同行家人Visit Japan Web 功能只能給 嬰兒、無法自行辦理的人使用，若一般使用者還是建議一人為原則申請。 二、三大重點入境前必須要完成以下三大重點才能快速入境，原則上疫苗必須要使用數位疫苗申請。 檢疫手續 (疫苗證明) 入境紀錄 海關申報 三、申請新增入境 檢疫手續申請數位新冠病毒健康證明申請 : 點選我 入境紀錄 海關申報海關申報部分較為簡單，依據選擇做填寫即可。 使用心得到達日本並非只需要看 “檢疫手續(快速通關)” 手續，順序會是 “檢疫手續” > “外國人入境紀錄” > “攜帶品、後送物品申報” 三個項目會按照順序使用，所以到現場使用 “截圖” 還不夠出境。 以下請準備項目、動作 Wifi 請在下飛機打開，並將截圖 ...

前言近期安排特殊的行程，我會把 React、Vue 、Angular 三大架框玩過一輪，在分析各式的架框使用的方式。我們就直接先從React先下手。本篇教學如何安裝 三大架框環境，後續再針對架構探討。 基本安裝以下我會使用的工具，依據讀者的習慣分配自己的工具。 Node.js (必) Git VS Code 安裝環境時，請確認 node 版本在進行下方作業。 1npm -v 一、React官方網連結：[ https://zh-hant.reactjs.org/ ] 1 安裝/創建 React安裝 React 請輸入npx create-react-app [名稱] ，如果有遇到下方錯誤訊息，請參考下方處理方式。 解决npm安装时出现run npm audit fix to fix them, or npm audit for details 安裝完畢後，請移動到指定PATH，指令 :cd [名稱]，再來進行npm start開啟網站。 2 結果畫面二、Angular官方網連結：[ https://angular.io/ ] 1 安裝/創建 Angula ...

前言最近需要開始撰寫 ASP.Net MVC，目前遇到Form驗證實例會有自動驗證登入，藉由這次機會來展現身手。 FormsAuthenticationTicket功能主要紀錄使用者資訊，他會有一組Cookies暫存，內部值會經過加密編碼、解密。如果第一次使用這個功能，千萬記住不要嘗試把密碼填入當中。 使用方式從 Client 點入登入網頁，這時Controllers可以進行驗證判斷，若有取得ticket成功會轉到首頁或是會員頁面;若驗證失敗則重新登入。 Authorize 身分驗證確保不讓外界隨意登入，需要再 Controllers上方輸入 Authorize，如果沒有登入成功會有訊息提示。 12345678 namespace ExampleForm.Controllers{ [Authorize()] public class MainController : Controller { return View(); }} WebConfig 設定這邊需要加入錯誤導向頁面設定。 12345<sys ...

前言Angular 近期蠻多公司願意使用的一項框架，他使用Type-Script 來開發是一個好的選擇，後期其他前台框架陸續更近所以差異就不會太大。PS: 目前不介紹TS使用方式。 AngularAngular 是基於 TypeScript 的開發平台。通常是指 “Angular 2+” 或 “Angular v2 及更高版本，框架由 Google 的 Angular 團隊以及社群共同領導。 上圖。Angular 應用的架構。其主要的構造塊是模組、組件、模板、元資料、資料繫結、指令、服務和依賴注入。 前置作業 NodeJs VSC VSC Marketplace 安裝指令:必須要先安裝NodeJs才能執行。npm install @angular/cli 創建專案創建專案也是相對簡單，本篇範例是用 version 14 如果不知道自己版本可以使用ng v。 指令為 ng new [source name] 即可，14版本會詢問是否要routing 以及css，記得要把routing 允許以及選擇自己比較熟悉的css。 1ng new useAngular 創建Pages第一次 ...

前言去年製作 製作 Scanner 章節，想到 VTuber 製作部分可以直接使用這些工具嘗試製作。本作者不是專業VTuber 製作師不適合直接使用 Live2D 製作，因此用快速建檔方式完成建模。 (如果使用需要使用工具就需要自備) 相關章節 製作 Scanner (一) - 把手機轉換電腦攝影機 製作 Scanner (二) - 快速使用讀取器/掃描器 (使用 html5-qrcode ) 需要使用工具 Dev47Apps、手機 VRoid Studio、VRoid Hub VRoidVRoid 是一套免費軟體的VTuber 製作軟體，初期需要從這邊建立簡單人物。下圖為初起介面。 一、創建角色(角色配置不詳細介紹自行挖掘、製作) 二、匯出角色這邊會需要創建 VRM 副檔名，需要確認匯出是否是VRM 。如果要使用 VRoid Hub 也是一樣，至指定角色頁面按下下載即可。

前言繼續上一篇未完成部分安裝 VMagicMirror ，這軟體主要是補助角色在直播中使用你創建的角色直播，需要配合 OBS 來完成直播功能。 安裝 VMagicMirror下載點 : 請點擊 一、VMagicMirror初始會有兩個畫面存在，左邊會是創建角色的呈現位置，右邊則是設定檔。現在我們將剛才的VRM檔案開啟。 讀取完後，立即可以呈現目前角色模樣。(目前先不使用 Dev47App ) 二、使用 OBS現在使用 【視窗攝取】方式設定 VMagicMirror 視窗，就會完成以上動作。 如果需要移除後面的綠色背景請將透明背景打給即可。

近期因工作需要換 Git 工具，從 Github Desktop 轉換到 SourceTree 工具，目前最吸引的部分是圖形(Graph)部分非常好分析 branch marge 狀況以及 branch 使用狀況。這篇簡單操作 “創建多層次 branch”。 SourceTree 是以 Git 為基礎設計的 GUI 圖形化工具。與 Github Desktop 比較上 Github Desktop 缺少圖形化介面缺乏管理、維護。 官方網址SourceTree : https://www.sourcetreeapp.com/ 安裝方式step.1 註冊bitbucket 與 github 是同類型的工具，採用 Mercurial 和Git 作為版控部分。這邊就請自行註冊。 step.2 安裝工具 進階選項-備註來自 Sourcetree - git 的 GUI 管理軟體 第一項如果勾選的話會在 checkout ( 切換 commit ) 的時候，自動將斷行符號由 LF ( linux ) 轉成 CRLF ( windows )，如果是在 linux 的系統上安裝則相反，選擇這個的好處 ...