SlickGPT 项目教程

2024-08-31 00:12:17作者：裘晴惠Vivianne

SlickGPT is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte. It offers GPT-4 integration, a userless share feature and other superpowers.

项目地址：https://gitcode.com/gh_mirrors/sl/slickgpt

1. 项目的目录结构及介绍

SlickGPT 项目的目录结构如下：

slickgpt/
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── svelte.config.js
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
├── README.md
├── MIT-LICENSE
├── src/
│   ├── routes/
│   ├── app.css
│   ├── app.html
│   ├── global.d.ts
│   └── hooks.ts
├── static/
│   └── favicon.png
└── tests/

目录介绍：

package-lock.json 和 package.json: 用于管理项目的依赖包。
postcss.config.cjs: PostCSS 配置文件。
svelte.config.js: Svelte 配置文件。
tailwind.config.ts: Tailwind CSS 配置文件。
tsconfig.json: TypeScript 配置文件。
vite.config.ts: Vite 配置文件。
README.md: 项目说明文档。
MIT-LICENSE: 项目许可证。
src/: 源代码目录。
- routes/: 路由文件目录。
- app.css: 全局样式文件。
- app.html: 应用入口文件。
- global.d.ts: 全局类型定义文件。
- hooks.ts: 钩子文件。
static/: 静态资源目录。
tests/: 测试文件目录。

2. 项目的启动文件介绍

SlickGPT 项目的启动文件是 src/app.html。这个文件是应用的入口点，包含了应用的基本结构和初始化代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.png">
    <title>SlickGPT</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

3. 项目的配置文件介绍

`postcss.config.cjs`

PostCSS 配置文件，用于配置 PostCSS 插件。

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
};

`svelte.config.js`

Svelte 配置文件，用于配置 Svelte 应用。

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter()
    }
};

export default config;

`tailwind.config.ts`

Tailwind CSS 配置文件，用于配置 Tailwind CSS。

import type { Config } from 'tailwindcss';

const config: Config = {
    content: [
        './src/**/*.{html,js,svelte,ts}'
    ],
    theme: {
        extend: {}
    },
    plugins: []
};

export default config;

`tsconfig.json`

TypeScript 配置文件，用于配置 TypeScript 编译选项。

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["src/**/*"],
    "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

`vite.config.ts`

Vite 配置文件，用于配置 Vite 开发服务器和构建选项。

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [svelte()]
});