【亲测免费】 Ollama UI 项目安装与使用教程

Ollama UI 项目安装与使用教程

1. 项目目录结构及介绍

Ollama UI 项目的目录结构如下：

ollama-ui/
├── api.js
├── background.js
├── build.sh
├── chat.css
├── chat.js
├── favicon.ico
├── generate_integrity_hash.sh
├── icon128.png
├── icon16.png
├── icon32.png
├── icon48.png
├── index.html
├── manifest.json
├── resources.hash
├── run-locally.sh
├── screenshot.png
├── screenshot1.jpg
├── screenshot2.jpg
├── LICENSE
└── README.md

目录结构介绍

• api.js: 项目的主要API文件，负责处理与后端的通信。
• background.js: Chrome扩展的背景脚本文件。
• build.sh: 项目的构建脚本，用于打包和部署。
• chat.css: 聊天界面的样式文件。
• chat.js: 聊天界面的主要逻辑文件。
• favicon.ico: 项目的图标文件。
• generate_integrity_hash.sh: 生成文件完整性哈希的脚本。
• icon*.png: 不同尺寸的图标文件，用于Chrome扩展。
• index.html: 项目的主页面文件。
• manifest.json: Chrome扩展的配置文件。
• resources.hash: 资源文件的哈希文件。
• run-locally.sh: 本地运行项目的脚本。
• screenshot*.png/jpg: 项目的截图文件。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 run-locally.sh 和 index.html。

run-locally.sh

这是一个用于在本地启动项目的脚本文件。执行该脚本后，项目会在本地服务器上运行，通常使用 http://localhost:8000 访问。

index.html

这是项目的主页面文件，包含了项目的核心HTML结构和初始化代码。启动项目后，浏览器会加载该文件，展示项目的用户界面。

3. 项目的配置文件介绍

项目的配置文件主要是 manifest.json。

manifest.json

这是Chrome扩展的配置文件，包含了扩展的基本信息、权限、背景脚本、图标等配置。以下是该文件的部分内容示例：

{
  "manifest_version": 3,
  "name": "Ollama UI",
  "version": "1.0",
  "description": "Simple HTML UI for Ollama",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

配置文件介绍

• manifest_version: 指定Manifest文件的版本，通常为3。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述信息。
• permissions: 扩展所需的权限列表。
• background: 指定背景脚本文件。
• action: 指定扩展的动作，包括默认弹出页面和图标。
• icons: 指定扩展的图标文件。

通过以上配置，Chrome浏览器可以正确加载和运行Ollama UI扩展。