iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Mobile Development

Ionic結合ChatGPT - 30天打造AI英語口說導師APP 系列

在當今的世界中,人工智慧的應用越來越廣泛,從最初的數據分析到今日的自然語言處理,AI已深深烙印在我們的生活中。其中,語言學習的領域更是AI的重要戰場。接下來的30天,我們將以Ionic建構跨平臺應用程式並以Angular框架為基礎,搭配今年最流行的ChatGPT,練習打造一款專屬自己的AI英語口說導師APP。透過這個過程,你不僅可以實際瞭解和學習到Ionic APP的開發過程和應用,同時也能了解AI如何在這些領域中發揮作用。讓我們一起展開這段精彩的鐵人賽旅程吧!

鐵人鍊成 | 共 30 篇文章 | 42 人訂閱 訂閱系列文 RSS系列文
DAY 1

【Day - 1】開賽前言與工具準備

前言 大家好!今年是我首次參加鐵人賽,以往都有在關注鐵人賽也很想嘗試挑戰看看,可是始終不敢跨出那一步。而今年是我人生中的一個轉捩點,做了很多不一樣的決定和嘗試,...

2023-09-01 ‧ 由 momochenisme 分享
DAY 2

【Day - 2】Ionic開發指南1 - 環境建置和執行

在開發APP前,首要任務就是設定開發環境。在開始建構任何軟體或應用之前,必須先建立一個穩定且可靠的開發環境,這是一個不可或缺的步驟。環境建置完成後,我們還將介紹...

2023-09-02 ‧ 由 momochenisme 分享
DAY 3

【Day - 3】Ionic開發指南2 - 注意事項與基本元件介紹

在開始開發Ionic專案之前,有一些事項我們需要特別留意。這些細節可能影響到APP的效能、使用者體驗或開發過程中的效率等等。除此之外,為了使大家在接下來的30天...

2023-09-03 ‧ 由 momochenisme 分享
DAY 4

【Day - 4】Ionic搭配Tailwind - 提升開發效率的新策略

在【Day - 2】時,我們已經順利的將專案執行起來,接下來就可以開始開發APP的頁面。但在進行開發之前,我希望在這30天的鐵人賽中,能夠專注在Ionic和Ch...

2023-09-04 ‧ 由 momochenisme 分享
DAY 5

【Day - 5】Ionic加入Three.js - 在APP中快速建立3D模型

在前幾天的準備之後,我們終於要開始規劃APP的畫面了。首先,根據【Day - 1】所設立的目標,第一步就是要在首頁中央放置一個3D模型機器人。提到3D模型,我們...

2023-09-05 ‧ 由 momochenisme 分享
DAY 6

【Day - 6】Capacitor Voice Recorder - 實現錄音功能

在【Day - 5】中,我們準備了一個3D模型機器人,下一步是新增核心功能:「錄音」。首先,我計劃設計一個對話用的錄音按鈕。我想讓它位於中心的形狀為大圓形的,提...

2023-09-06 ‧ 由 momochenisme 分享
DAY 7

【Day - 7】Gesture & Capacitor Haptics - 建立自定義手勢和觸覺反饋

在【Day - 6】中,我們已經完成了一個基本的錄音功能,目前的操作方式是:按下按鈕開始錄音,再次按下則停止錄音。不過,今天我打算調整一下這種操作方式。我的目標...

2023-09-07 ‧ 由 momochenisme 分享
DAY 8

【Day - 8】Open AI API - 認識GPT和Whisper

經過前幾天的努力,我們的錄音功能已經成功建置完成。終於可以來介紹本次主題的另一個重點:ChatGPT。近年來,隨著AI的劇烈進展,特別是今年可以稱為生成式AI的...

2023-09-08 ‧ 由 momochenisme 分享
DAY 9

【Day - 9】Whisper模型 - 將語音轉成文字

昨天,我們對Whisper模型進行了初步的探索和使用。今天,我們將結合這兩個部分,利用Whisper API將錄製的語音轉成文字。正如【Day - 8】所述,儘...

2023-09-09 ‧ 由 momochenisme 分享
DAY 10

【Day - 10】ASP.NET Web API - 用FFmpeg打造音訊轉換服務

在【Day - 9】我花了很多時間嘗試解決音訊轉檔的問題。由於使用的Capacitor套件錄製的音訊格式是aac,我們需要將其轉換成Whisper API可以接...

2023-09-10 ‧ 由 momochenisme 分享