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主进程命令消息的中心枢纽。让我们看看它如何处理选择图像：
typescript// 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"按钮时运行）如何发送命令：typescript// 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如何处理它：typescript// 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 ( <div className="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。
结论
渲染器用户界面（前端）是进入Upscayl应用程序的窗口。
在这里，进行交互、做出选择并见证魔法发生。它将您的操作转化为命令，发送给Upscayl的"大脑"，然后以友好的方式将结果呈现给您。
没有这个关键部分，Upscayl将变得非常难以使用，甚至不可能使用！
在下一章中，我们将深入探讨Upscayl的另一个核心组件：AI模型，它们是放大过程中真正的"艺术家" 😋