[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。