[Upscayl圖像增強] docs | 前端 | Electron工具(web-＞app)

鏈接：https://upscayl.org/
在這里插入圖片描述

docs：Upscayl

Upscayl是一款桌面應用程序，允許用戶使用人工智能放大和增強圖像。

提供了一個用戶友好的圖形界面（渲染器用戶界面），用戶可以選擇圖像或文件夾，從多種AI模型中選擇，并配置放大設置。

應用程序隨后利用強大的外部放大二進制文件執行密集的AI驅動圖像處理，通過Electron主進程命令協調所有操作，并通過應用程序狀態管理維護用戶偏好和進度。

概覽

在這里插入圖片描述

章節

渲染器用戶界面(前端)
AI模型
Electron主進程命令
放大二進制文件(upscayl-bin)
應用程序狀態管理

第一章：渲染器用戶界面（前端）

歡迎來到Upscayl的世界🐻???

在這第一章中，我們將探索應用程序中您最先接觸的部分：渲染器用戶界面，也稱為前端。可以把它看作是Upscayl的"面孔"——您看到和點擊的內容。

什么是渲染器用戶界面？

想象一下坐在車里。您看不到引擎或所有復雜的電子設備，對吧？相反，您會看到一個帶有方向盤、踏板、按鈕和儀表的儀表盤。您通過這些來控制汽車并了解它的狀態（比如速度和油量）。

請添加圖片描述

渲染器用戶界面（或前端）就像是Upscayl的儀表盤。它是"控制面板"，您可以在這里：

**查看**原始圖像
**選擇**要使用的AI模型
**調整**設置，比如圖像的放大倍數
**觀察**圖像放大過程中的進度
**欣賞**放大后的驚艷效果！

Upscayl的這一部分是用常用于網站的技術構建的，比如React和Next.js。但它不是在網頁瀏覽器中打開，而是在Electron提供的特殊窗口中運行。

Electron是一個工具，允許開發者使用網頁技術構建桌面應用程序（如Upscayl）。

所以，當您打開Upscayl時，您看到的就是它的"前端"。

Electron解決：讓Upscayl易于使用

前端解決的主要問題是用戶交互。沒有它，Upscayl將只是一個在后臺運行的復雜程序，您不知道如何告訴它該做什么，也無法看到發生了什么。前端將您的意愿轉化為應用程序其他部分可以理解的命令，并以易于理解的方式將結果呈現給您。

讓我們看一個常見的使用場景：放大單張圖像。

如何使用前端放大圖像

當您想放大一張圖像時，以下是您與Upscayl前端交互的簡單步驟示例：

選擇圖像：點擊按鈕（如"選擇圖像"）或將圖像直接拖到Upscayl窗口。前端會立即顯示您選擇的圖像。
選擇選項：您可以從下拉菜單中選擇AI模型，或選擇圖像的放大倍數（如2倍、4倍）。前端會更新以顯示您當前的選擇。
開始放大：點擊大大的"Upscayl"按鈕。
觀察進度：前端會顯示進度條或文字（如"25%"、“50%”），讓您知道Upscayl正在工作。
查看結果：完成后，前端會顯示您精美放大的圖像，通常還提供工具與原始圖像進行比較！

這整個體驗——從點擊按鈕到查看結果——都是由渲染器用戶界面管理的。

前端內部：工作原理

現在，讓我們稍微揭開帷幕，看看當您與前端交互時發生了什么。

前端作為"信使"

當點擊"Upscayl"按鈕時，前端并不實際執行放大操作。這是一個非常繁重的任務，需要特殊的處理能力。相反，前端就像一個信使。它收集您提供的所有信息（如圖像路徑、選擇的模型和放大倍數），并將其作為清晰的消息發送給應用程序的"大腦"，即Electron主進程命令。

一旦Electron主進程命令開始工作，前端就會耐心等待更新。它監聽諸如"嘿，我已經完成了25%！"或"好消息，這是您的完成圖像！"等消息，然后相應地更新您在屏幕上看到的內容。

以下是點擊"Upscayl"時這個"消息傳遞"過程的簡單圖示：

在這里插入圖片描述

關鍵前端組件

在這里插入圖片描述

Upscayl的前端被組織成不同的部分或"組件"，每個組件都有特定的職責。讓我們看看提供的代碼片段中的一些重要組件：

Home頁面（renderer/pages/index.tsx）：這是應用程序用戶界面的主要入口點。它保存整體狀態（如選擇了哪個圖像、放大進度等），并作為監聽Electron主進程命令消息的中心樞紐。

讓我們看看它如何處理選擇圖像：

// renderer/pages/index.tsx
const Home = () => {// ... 其他狀態和設置 ...const [imagePath, setImagePath] = useState(""); // 存儲所選圖像的路徑const selectImageHandler = async () => {// 請求Electron主進程打開文件選擇對話框const path = await window.electron.invoke(ELECTRON_COMMANDS.SELECT_FILE);if (path === null) return; // 如果用戶取消，不做任何操作console.log("🖼 選擇的圖像路徑: ", path);setImagePath(path); // 更新狀態，使UI顯示圖像// ... 更多邏輯設置輸出路徑和驗證圖像 ...};// ... 組件的其余部分 ...return ( /* ... UI元素 ... */ );
};

在這個片段中，selectImageHandler是一個函數，當您點擊"選擇圖像"按鈕時運行。它請求Electron主進程命令（使用window.electron.invoke）顯示文件選擇窗口。一旦您選擇了一個文件，其路徑會被存儲在imagePath中，UI會自動更新以顯示您選擇的圖像。

Sidebar（renderer/components/sidebar/index.tsx）：這個組件通常位于窗口的左側或右側。您可以在這里找到所有控制和設置，如模型選擇、放大倍數和"Upscayl"按鈕。

以下是upscaylHandler（當您點擊"Upscayl"按鈕時運行）如何發送命令：

// renderer/components/sidebar/index.tsx
const Sidebar = ({ /* ...props... */ }) => {// ... 狀態變量，如selectedModelId, scale等 ...const upscaylHandler = async () => {setUpscaledImagePath(""); // 清除之前的結果if (imagePath !== "") { // 確保已選擇圖像setProgress("等待中..."); // 顯示加載消息// 發送消息（命令）到Electron主進程window.electron.send(ELECTRON_COMMANDS.UPSCAYL, {imagePath, // 您想放大的圖像outputPath: outputPath, // 保存位置model: selectedModelId, // 使用的AI模型scale: scale, // 放大倍數// ... 其他設置如壓縮、GPU ID等 ...});console.log("🏁 UPSCAYL命令已發送！");} else {// 如果沒有選擇圖像，顯示錯誤toast({ title: "未選擇圖像！", description: "請選擇一張圖像。" });}};// ... 組件的其余部分 ...return ( /* ... 包括"Upscayl"按鈕的UI元素 ... */ );
};

這個upscaylHandler從前端收集您選擇的所有設置（如imagePath、selectedModelId、scale），然后使用window.electron.send向Electron主進程命令發送UPSCAYL命令。這是"大腦"開始繁重工作的時刻！

MainContent（renderer/components/main-content/index.tsx）：這是顯示圖像的大中央區域。它負責顯示原始圖像、放大后的圖像、進度條和比較工具。

一個很酷的功能是拖放。以下是MainContent如何處理它：

// renderer/components/main-content/index.tsx
const MainContent = ({ /* ...props... */ }) => {// ... 狀態和其他處理函數 ...const handleDrop = (e) => {e.preventDefault(); // 阻止瀏覽器處理拖放resetImagePaths(); // 清除之前選擇的圖像if (e.dataTransfer.files.length === 0) {toast({ title: "未拖放有效文件" }); // 顯示錯誤return;}const filePath = e.dataTransfer.files[0].path; // 獲取拖放文件的路徑const extension = e.dataTransfer.files[0].name.split(".").at(-1);if (/* ... 檢查是否為有效的圖像格式 ... */) {console.log("🖼 設置圖像路徑: ", filePath);setImagePath(filePath); // 更新主圖像路徑狀態// ... 更多邏輯設置輸出路徑和驗證 ...} else {toast({ title: "拖放的文件無效" }); // 顯示錯誤}};return (<divclassName="relative flex h-screen w-full flex-col items-center justify-center"onDrop={handleDrop} // 告訴div使用我們的handleDrop函數// ... 其他拖放處理函數 ...>{/* ... 進度中顯示進度條 ... */}{progress.length > 0 && (<ProgressBar progress={progress} /* ... */ />)}{/* ... 如果不是批量模式且未放大圖像但已選擇圖像，顯示所選圖像 ... */}{!batchMode && upscaledImagePath.length === 0 && imagePath.length > 0 && (<ImageViewer imagePath={imagePath} /* ... */ />)}{/* ... 顯示放大后的圖像或比較工具 ... */}</div>);
};

MainContent使用onDrop事件檢測當您將圖像文件拖放到窗口上并釋放時。handleDrop函數然后提取文件的路徑，如果是有效的圖像，就更新imagePath狀態。這使得ImageViewer組件（也在MainContent內）自動顯示新選擇的圖像。它還根據應用程序的當前狀態（如是否選擇了圖像，或是否正在放大）智能地顯示ProgressBar或ImageViewer。