我用 Vibe Coded 開發了一個應用，你可以用它為任何你喜歡的圖片加入樣式！ :D

這是GitHub Copilot CLI 挑戰賽的參賽作品

我建造的

這是我第一次使用GitHub Copilot CLI！我相信完成這個挑戰能讓我熟悉這個CLI的使用方法，以及它如何幫助我的開發流程。

我用 Vibe Code 開發了一個名為「 ImageStyler 」的 Web 應用，使用者可以上傳任何圖片，並將其轉換為 ASCII 字元或類似畫布的風格。我開發這個應用程式是因為它讓我想起了之前在「網頁設計」課程上做的一個作業，當時我們需要調整圖片大小/更改顏色以適應網頁。我們使用的工具之一是「 GIMP 」。由於我才剛開始開發（2 月 5 日），而且截止日期就在幾週後，我心想「為什麼不把這個簡單的工具搬到網路上呢？」。開發這個應用程式純粹是為了好玩，也讓我有機會體驗 GitHub Copilot CLI。

使用的技術

這是用原生 HTML、CSS 和 JS 建構的。它使用 GitHub Copilot CLI 進行 vibe 編碼，因此 99% 的工作都依賴 Copilot 來完成。

示範

這就是網站的樣子！

拖放影像

您可以將圖片拖曳到框框中，或點擊按鈕選擇圖片。

投放圖片

ASCII 特徵

一種方法是將影像轉換為 ASCII 格式。

ASCII

繪畫設定

另一種方法是繪製圖像。為了便於理解，下圖展示了混合和轉換影像後的效果。

GIF描述

下載修改後的圖片

完成後，您可以選擇為檔案命名並下載修改後的映像。

GIF描述

我使用 GitHub Copilot CLI 的經驗

GitHub Copilot CLI 在我的 Visual Studio Code 中真的非常棒（對於一個 CLI 新手來說）。每次我請求新功能或修復 bug 時，它都會在文件中告訴我他們做了哪些更改。

此外，它還會徵求我的權限才能執行操作。這種情況只會在執行敏感指令時出現，例如執行 Python 伺服器或從網路取得文件。在執行命令之前徵求權限總是沒錯的。

由於專案是用 Vibe 編寫的，我完全依賴命令列介面 (CLI) 來建構它。不幸的是，由於我使用的是免費套餐，所以我的 CLI 使用次數已達上限。我遇到了一些挑戰，例如：

要求太多了。由於時間有限，我試著把所有想要的功能塞進一個提示裡。問題是，系統開始變得混亂，錯誤也越來越多。於是我開始思考如何措辭，才能在盡可能少的提示下，獲得我想要的功能。
GIF相容性。此網頁應用程式不支援GIF格式。最初，我們嘗試在開發過程中加入GIF功能，但遇到了一些問題，例如無法正常播放GIF動畫，也無法匯出為GIF格式。因此，我們暫時擱置了GIF功能，只專注於影像處理的MVP（最小可行產品）。或許我一次提了太多要求，但我相信增加GIF功能是可行的，而且如果能實現就太好了！

不過，在我達到使用 CLI 的極限之後，我還是做了一些小的改動，並修改了我的儲存庫中的 Readme.md 檔案。

總的來說，在 Visual Studio Code 中使用 GitHub Copilot CLI 的體驗非常棒！以後我打算把它當作一個指導工具，而不是用它來逐行寫整個專案程式碼。它非常方便，而且也是一個很棒的學習工具（如果有人問起的話！）。