[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主进程命令消息的中心枢纽。

让我们看看它如何处理选择图像：

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模型，它们是放大过程中真正的"艺术家" 😋