
## 简介

NextUI是一个基于Next.js的UI库，它提供了丰富的组件和样式，帮助开发者快速构建现代化的Web应用程序。个人感觉还是挺好用的，这里记录一下如何手动安装配置。

为啥要手动配置安装？主要是使用NextUI的cli工具安装的话，会出现一些问题，而且有一些老项目以后页会使用NextUI的。


## 安装

### 创建项目

这里我想手动创建一个项目用来演示，使用`npx create-next-app`命令来创建项目。

项目没什么特别的，只要记得选上`tailwind`就可以了

### 安装NextUI


    npm install @nextui-org/react
    # 或者
    yarn add @nextui-org/react


### 配置 Tailwind CSS

    /** @type {import('tailwindcss').Config} */
    const {nextui} = require("@nextui-org/react");
    export default {
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {
        colors: {
            background: "var(--background)",
            foreground: "var(--foreground)",
        },
        },
    },
    darkMode: "class",
    plugins: [nextui()]
    };

### 设置 NextUIProvider

在你的 Next.js 应用的根组件中，使用`NextUIProvider`来包裹你的应用。通常，这可以在`pages/_app.js`或`pages/_app.tsx`中完成：

    import "@/styles/globals.css";
    import {NextUIProvider} from "@nextui-org/react";
    import {ThemeProvider as NextThemesProvider} from "next-themes";
    export default function App({ Component, pageProps }) {
    return (
        <NextUIProvider>
            <NextThemesProvider attribute="class" defaultTheme="dark">
            <Component {...pageProps} />
            </NextThemesProvider>
        </NextUIProvider>
    );
    }


这里，我使用`next-themes`来实现主题切换。`defaultTheme="dark"`可以设置默认的主题样式。


### 使用组件

修改`index.js`内容：


    import {Button} from "@nextui-org/react";


    export default function Home() {
    return (
        <div>
            <Button>Click me</Button>
        </div>
    );
    }


运行项目，就可以看到效果了。

## 总结

NextUI的安装配置还是比较简单的，而且这是一个非常漂亮的UI库。免费的组件基本上能满足日常的需求。

NextUI是一个基于Next.js的UI库，它提供了丰富的组件和样式，帮助开发者快速构建现代化的Web应用程序。个人感觉还是挺好用的，这里记录一下如何手动安装配置。

Next.js项目手动安装配置NextUI


## 期待一场鹅毛大雪

太久没有见到一场畅快的鹅毛大雪了。

如果不下雪，空气中就会滋生一些有毒的物质，对身体不好。

这不，带着孩子跑了一天的医院，连续咳嗽10多天了，拍了片子抽了血，被大夫撵回家了。


不光是孩子咳嗽，我最近几天也是咳嗽的越发严重了，

这阵子病毒横行霸道已经分不清是什么病毒了，反正就是病了，

吃什么药也不灵，有时候觉得人类的医学就是个笑话，

治病还得靠自身的免疫系统，所以大家还是多吃多喝保持好身体吧。

## 林姨的书

《你有遗憾吗》，林姨的新书。

刷抖音的时候刷到她在推荐自己的新书，迫不及待的就下单了。

之前刷到过那些她拍的视频，那些词汇和语句太能打动人任何一个年龄段的人了，

平时经常看“光头”侠们的代码书，偶尔换换口味也好。

## 原神更新了5.3

夏天的时候就在盼着原神5.3的更新了，元旦那天终于更新了，

运气不错，小保底没歪抽到了火神，

火神还是建模和技能还是挺帅气拉风的，

对得起大家的期待，

不过抽完火神做完主线任务，原神又要开启了漫长的长草期了。



太久没有见到一场畅快的鹅毛大雪了，如果不下雪，空气中就会滋生一些有毒的物质，对身体不好。这不，带着孩子跑了一天的医院，连续咳嗽10多天了，拍了片子抽了血，被大夫撵回家了。

久未见雪，满怀期待。


## 写在岁末
> 2025年，一定会是一个充满挑战和机遇的一年。在这个充满不确定性的世界里，我选择了一个新的起点，开启了一个全新的旅程。

从2023年底开始，我就遭遇了人生的悲欢离合，可以说这一整年的快乐并不多，焦虑几乎贯穿了整个2024年。或许是因为对未来的迷茫，或许是对自己的怀疑，或许是对生活的不满，或许是对未来的恐惧。（这几个“或许”是AI提示给我的，我觉得说得挺好）。忙忙碌碌的一直到了年底，才开始有些喘气的机会，想起了一些曾经放弃的项目，一些半途扔掉的学习，每天都在瞎忙中挤出一些时间来继续。


## 碎言博客

之前我满怀信心地使用Next.js重构现有的博客，但没想到在使用过程中遇到了很多问题，最后还是放弃了。其中最麻烦的就是部署问题。当时没有尝试Vercel，而是使用了GitHub Pages。GitHub Pages部署需要编写自动化脚本，但总是遇到各种问题。后来尝试了Vercel，发现部署非常简单，而且免费，于是直接就换了。

## 更新了碎言

我直接使用Next.js和NextUI进行了重构。在现代前端框架和AI的帮助下，我迅速复刻了原有博客的全部功能。之前的做法是写完博客后，在本地运行以生成静态文件，然后推送到GitHub Pages。现在，我写完博客后直接推送到GitHub，然后Vercel会自动拉取并构建，这样就省去了本地生成静态文件的步骤。而且，Vercel的免费额度也足够使用。至少在国内，我感觉Vercel的打开速度比GitHub Pages快。

## 2025年的目标

继续写博客，保持每周一篇的习惯。从Python过渡到JavaScript，把一些项目用现代的JavaScript框架重构一下，顺带学习一些新的框架，比如Svelte就引起了我的兴趣。

## 总结

这一年似乎并没有太多特别的事情，除了成功考取驾照并度过实习期。作为一个普通人，时间总是匆匆流逝。希望2025年能更好。也希望看到这篇文章的朋友们，能和我一样，在2024年的最后一天，回顾过去，展望未来。我们2025年见。


2025年，一定会是一个充满挑战和机遇的一年。在这个充满不确定性的世界里，我选择了一个新的起点，开启了一个全新的旅程。

写在岁末：别了2024混混沌沌的一年

## 一、 Socket.IO 简介
Socket.IO 由 Guillermo Rauch 开发，旨在解决 WebSocket 在不同浏览器和网络环境中的兼容性问题。它提供了统一的 API，让开发者无需担心底层传输协议的差异，轻松实现实时双向通信。

其主要特点包括：

跨平台支持：支持 Node.js、Python、Java、.NET 等多种语言和平台。例如，在 Python 中可以通过安装python-socketio库来创建服务器，有多种创建方式，如使用多进程多线程模式的 WSGI 服务器对接、作为 Flask 或 Django 应用的一部分，或者使用协程的方式运行（推荐）。

自动回退机制：如果 WebSocket 不可用，Socket.IO 会自动回退到其他协议，如 XHR 轮询、JSONP 轮询等。这样确保了在各种网络环境下都能实现实时通信。

事件驱动：基于事件的编程模型，支持自定义事件。开发者可以根据具体需求定义和处理各种事件，实现灵活的交互逻辑。

命名空间：支持命名空间，可以在同一连接中区分不同的逻辑通道。比如，可以创建不同的命名空间来处理不同类型的实时通信需求，提高代码的可维护性和扩展性。

房间机制：支持房间（Rooms）功能，可以实现群组通信。服务器端可以通过socket.join(room)让客户端加入特定房间，客户端也可以通过发送特定事件加入房间，实现高效的群组通信。

连接管理：内置心跳机制和重连功能，保证连接的稳定性和可靠性。即使在网络不稳定的情况下，也能自动尝试重新连接，确保实时通信不中断。

总之，Socket.IO 是一个强大且灵活的库，非常适合需要实时通信的应用，如聊天室、实时协作工具和在线游戏等。

## 二、安装与创建

### （一）服务器端安装

在服务器端安装 Socket.IO 非常简单，首先确保你已经安装了 Node.js。然后，在命令行中运行以下命令来安装 Socket.IO：

    npm install socket.io

### （二）客户端安装

在客户端，可以通过`<script>`标签加载 Socket.IO 库。例如：

    <script src="/socket.io/socket.io.js"></script>

### （三）创建服务器

在 Node.js 中，可以直接使用http模块创建服务器并引入 Socket.IO：

    const http = require('http');
    const server = http.createServer();
    const io = require('socket.io')(server);
    server.listen(3000, () => {
        console.log('Server listening on port 3000');
    });

在 Express 框架中创建 Socket.IO 服务器：

    const express = require('express');
    const app = express();
    const server = require('http').Server(app);
    const io = require('socket.io')(server);
    server.listen(80);
    app.get('/', function (req, res) {
        res.sendfile(__dirname + '/index.html');
    });
    io.on('connection', function (socket) {
        socket.emit('news', { hello: 'world' });
        socket.on('my other event', function (data) {
            console.log(data);
        });
    });

在 KOA 框架中创建 Socket.IO 服务器：

    const koa = require('koa');
    const static = require('koa-static');
    const path = require('path');
    const bodyParser = require('koa-bodyparser');
    const indexRouter = require('./routers/indexRouter');
    const { createServer } = require('http');
    const app = new koa();
    const httpServer = createServer(app.callback());
    const socketServer = require('./service/socketService');
    socketServer(httpServer);
    app.use(bodyParser());
    app.use(static(path.join(__dirname, 'public')));
    app.use(indexRouter.routes());
    httpServer.listen(3000, () => {
        console.log('server start');
    });

### （四）建立连接

服务器和客户端建立连接的过程如下：在服务器端，当有客户端连接时，会触发connection事件。例如在 Node.js 中：

    io.on('connection', (socket) => {
        console.log('A client connected');
    });

在客户端，通过创建Socket实例并连接到服务器。例如：

    const socket = io('http://localhost:3000');
    socket.on('connect', () => {
        console.log('Connected to server');
    });

当连接建立成功后，可以在服务器和客户端之间进行事件的发送和接收。

## 三、Socket 对象方法

### （一）发送和接收数据

Socket.IO 通过事件进行通信，socket.emit()方法用于发送事件，socket.on()方法用于监听事件。
例如，在服务器端可以使用以下方式发送事件：

    io.on('connection', (socket) => {
        socket.emit('customEvent', { message: 'Hello from server!' });
    });

在客户端，可以通过以下方式监听事件并接收数据：

    const socket = io('http://localhost:3000');
    socket.on('customEvent', (data) => {
        console.log(data.message); // Hello from server!
    });

### （二）断开连接

在客户端和服务器端都可以主动断开连接。
客户端断开连接：可以在特定情况下调用`socket.disconnect()`方法来断开与服务器的连接。例如，当用户退出应用时，可以触发断开连接操作。
// 假设在某个用户操作后触发断开连接
`socket.disconnect();`

服务器端断开连接：服务器可以在特定条件下调用`socket.disconnect(true)`强制断开与某个客户端的连接。
当连接断开时，会触发相应的事件。在客户端，会触发`socket.on('disconnect')`事件；在服务器端，会触发`socket.on('disconnect', (reason) => {... })`事件，其中reason参数表示断开连接的原因。

### （三）其他常用方法
SocketIO 对象有许多常用方法，如emit、close、on、setTimeout、setInterval、setLoop等。
emit：用于发送事件，可以携带数据和回调函数。例如：

    socket.emit('eventName', data, function (response) {
        // 处理回调函数的响应
    });

close：用于关闭连接。例如：

    socket.close();

on：用于监听事件，并用回调函数处理事件。例如：

    socket.on('eventName', function (data) {
        // 处理事件的数据
    });

setTimeout：等待指定的时间后执行函数。例如：

    socket.setTimeout(function () {
        console.log('Time out!');
    }, 5000);

setInterval：按照指定的时间间隔定期执行函数。例如：

    socket.setInterval(function () {
        console.log('Interval triggered!');
    }, 2000);

setLoop：循环执行函数直至连接关闭。例如：

    socket.setLoop(function () {
        socket.emit('loopEvent', { data: 'Loop data' });
    });

## 四、命名空间与房间

### （一）命名空间

命名空间是一种通信通道，允许通过单个共享连接拆分应用程序的逻辑。本质上，它就是指定不同的终点或路径，这一特性可以减少所需资源数目（如 TCP 连接数），同时通过隔离通信信道达到隔离应用的多个部分。
在 Socket.IO 中，默认命名空间是 /，客户端默认连接到这个命名空间，服务端也默认监听这个命名空间。例如：

    // the following two will emit to all the sockets connected to `/`
    io.sockets.emit('hi', 'everyone');
    io.emit('hi', 'everyone'); // short form

每个默认命名空间都会触发一个 connection 事件，并以 socket 作为参数传递到事件响应中。
如果要设置一个自定义命名空间，可以在服务端调用 of 函数。例如：

    const nsp = io.of('/my-namespace');
    nsp.on('connection', function(socket){
        console.log('someone connected');
    });
    nsp.emit('hi', 'everyone!');

在客户端，告知 socket.io 客户端连接到对应的自定义命名空间的方法如下：

    const socket = io('/my-namespace');

### （二）房间

房间是在每个命名空间内定义的专属通道，sockets 可以 join 和 leave 房间。
加入房间：通过调用 join 函数可以让 socket 订阅一个指定通道。例如：

    io.on('connection', function(socket){
        socket.join('some room');
    });

离开房间：调用 leave 可以像调用 join 一样离开房间，这两个方法都是异步的，接受 callback 作用参数。例如：

    socket.on('leaveRoom', function (data, fn) {
        socket.leave(data.roomName);
        fn({'code': 0, 'msg': '已退出房间', 'roomName': data.roomName});
    });

向房间广播消息：可以通过 to 或者 in（两者等同）在频道内广播或发送消息。例如：

    io.to('some room').emit('some event');

在不加入或指定房间的情况下，socket.io 会默认分配一个 default room。同一房间下的 socket 可以广播消息，例如：

    clientSocket.on('joinRoom', function (data, fn) {
        clientSocket.join(data.roomName);
        fn({'code': 0, 'msg': '加入房间成功', 'roomName': data.roomName});
    });

    clientSocket.on('sendMsg', function (data, fn) {
        clientSocket.broadcast.to(data.roomName).emit('receiveMsg', data);
        fn({'code': 0, 'msg': '消息发生成功'});
    });

## 五、Socket.IO 原理

### （一）基于 WebSocket 和降级策略
Socket.IO 底层使用 engine.io 封装了一层协议。在支持 WebSocket 的环境中，Socket.IO 会优先使用 WebSocket 进行通信，以实现高效的双向通信。但当浏览器不支持 WebSocket 时，Socket.IO 会自动采用降级策略，拥有多种轮询解决方案，确保在各种网络环境下都能实现实时通信。例如，它可以使用 XHR 轮询、JSONP 轮询等方式。这样的设计使得 Socket.IO 具有极高的兼容性，能够适应不同的浏览器和网络环境。

### （二）建立连接过程

WebSocket 建立连接的过程复用了 HTTP 的握手通道。客户端发送 HTTP 请求，并在请求头中带上特定的参数，如Connection: Upgrade、Upgrade: websocket，服务端识别该请求头之后，进行协议升级，使用 WebSocket 协议进行数据通信。

请求头参数说明如下：

Request URL：请求服务端地址。

Request Method：请求方式，支持get、post、option等。

Status Code 101 Switching Protocols：当收到 101 请求状态码时，表明服务端理解并同意客户端请求，更改Upgrade header字段。服务端也必须在响应中，生成对应的Upgrade值。

Connection：设置upgrade header，通知服务端，该request类型需要进行升级为 websocket。

upgrade_mechanism：规范。

Host：服务端 hostname。

Origin：客户端 hostname:port。

Sec-WebSocket-Extensions：客户端向服务端发起请求扩展列表，供服务端选择并在响应中返回。

Sec-WebSocket-Key：秘钥的值是通过规范中定义的算法进行计算得出，虽然不安全，但是可以阻止一些误操作的 websocket 请求。

Sec-WebSocket-Accept：计算公式为获取客户端请求 header 的值Sec-WebSocket-Key，使用魔数'258EAFA5-E914-47DA-95CA-C5AB0DC85B11'，通过 SHA1 进行加密计算（sha1(Sec-WebSocket-Key + magic)），将值转换为 base64。

Sec-WebSocket-Protocol：指定有限使用的 WebSocket 协议，可以是一个协议列表。服务端在响应中返回列表中支持的第一个值。

Sec-WebSocket-Version：指定通信时使用的 WebSocket 协议版本。最新版本为 13，历史版本也有其他值。

Upgrade：通知服务端，指定升级协议类型为 websocket。

响应头方面，服务端响应了Upgrade，此时，连接已经和 HTTP 没什么关系了，协议升级后双方建立的就是 WebSocket 连接。整个过程中，通过这样的握手方式，实现了从 HTTP 协议到 WebSocket 协议的转换，为客户端和服务端的双向通信奠定了基础。

## 六、应用与展望

### （一）应用场景
实时分析：将数据推送到客户端，客户端表现为实时计数器、图表或日志客户。例如在金融交易平台中，可以实时更新股票价格、交易量等数据，让用户能够及时了解市场动态。在工业监控系统中，传感器数据可以通过 Socket.IO 实时传输到客户端，实现对生产过程的实时监测和分析。

实时通讯：创建实时的、多用户聊天室，消息即时传递。无论是社交应用、在线客服系统还是内部通讯工具，Socket.IO 都能提供高效的实时通讯功能。例如在在线游戏中，玩家之间的交流可以通过 Socket.IO 实现实时同步，提升游戏体验。

二进制流传输：从 1.0 版本开始，Socket.IO 支持任何形式的二进制文件传输，例如图片、视频、音频等。这在多媒体应用中非常有用，比如视频会议系统可以通过 Socket.IO 实时传输视频流，实现高清、低延迟的视频通信。

文档合并：允许多个用户同时编辑一个文档，并能够看到每个用户做出的修改。类似于 Google Docs 的在线文档编辑工具可以利用 Socket.IO 实现实时同步，提高协作效率。
### （二）未来发展潜力
技术融合：随着技术的不断发展，Socket.IO 有望与其他新兴技术融合，如人工智能、区块链等。例如，结合人工智能技术，可以实现智能实时客服系统，通过分析用户的问题自动提供准确的回答。与区块链技术结合，可以实现安全、透明的实时数据传输和验证。

性能优化：随着用户对实时通信的要求越来越高，Socket.IO 将不断进行性能优化。这包括提高数据传输速度、降低延迟、优化资源占用等方面。例如，通过改进底层的 engine.io 协议，进一步提高在不同网络环境下的通信效率。

跨平台扩展：目前 Socket.IO 已经支持多种语言和平台，但未来有望进一步扩展到更多的领域。例如，在物联网领域，Socket.IO 可以实现设备之间的实时通信，为智能家居、智能交通等应用提供支持。

丰富的插件生态：Socket.IO 的插件生态将不断丰富，为开发者提供更多的功能扩展。例如，开发出更多的安全插件，加强实时通信的安全性；开发出更多的数据分析插件，帮助开发者更好地理解和利用实时数据。

总之，Socket.IO 在实时通信领域具有广阔的应用前景和发展潜力。随着技术的不断进步，它将继续为开发者提供强大的实时通信解决方案，推动实时应用的发展。


Socket.IO 由 Guillermo Rauch 开发，旨在解决 WebSocket 在不同浏览器和网络环境中的兼容性问题。它提供了统一的 API，让开发者无需担心底层传输协议的差异，轻松实现实时双向通信。

Socket.IO：实时通信的强大工具


本教程将带你了解如何使用3M工具（nvm, npm, nrm）来管理Node.js环境。这些工具将帮助你轻松切换Node.js版本，管理项目依赖，以及优化包的下载速度。

环境要求

•  一台可以访问互联网的计算机。
•  基本的命令行操作知识。

第一步：安装nvm（Node Version Manager）

nvm是一个Node.js版本管理器，允许你在同一台机器上安装和切换不同版本的Node.js。

安装nvm

对于不同的操作系统，安装nvm的方法有所不同：

在Linux或macOS上：

1.  打开终端。 
2.  运行以下命令来安装nvm：
    
        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

或者使用wget：

        wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

3.  安装完成后，关闭并重新打开终端，以便nvm生效。

在Windows上：

1.  你可以使用nvm-windows，这是一个为Windows设计的nvm版本。
2.  访问nvm-windows的GitHub页面 https://github.com/coreybutler/nvm-windows/releases，下载最新版本的安装程序并运行。
验证nvm安装
在终端中运行以下命令来检查nvm是否安装成功：

        nvm --version

第二步：使用nvm安装Node.js
1.  查看可用的Node.js版本：
    
        nvm list-remote

2.  安装最新版本的Node.js：
    
        nvm install node

或者安装特定版本，例如v14.17.0：

        nvm install 14.17.0

3.  列出已安装的Node.js版本：

        nvm list

4.  切换到特定版本的Node.js：

        nvm use 14.17.0

第三步：使用npm管理依赖
npm是Node.js的默认包管理器，用于安装和管理项目依赖。
1.  创建一个新的Node.js项目目录：

        mkdir my-node-project
        cd my-node-project

2.  初始化npm项目：

        npm init -y

这将创建一个package.json文件，记录项目的依赖和配置。
3.  安装一个包，例如express：
    
        npm install express

4.  运行你的Node.js应用：
    
        node your-app.js

第四步：使用nrm管理npm源
nrm允许你管理npm的下载源，优化下载速度。
1.  安装nrm：
    
        npm install -g nrm

2.  列出可用的npm源：
    
        nrm ls

3.  切换到淘宝npm源以加快下载速度：
    
        nrm use taobao

结语
通过本教程，你已经学会了如何使用3M工具来管理你的Node.js环境。这些工具将帮助你更高效地开发Node.js应用。

本教程将带你了解如何使用3M工具（nvm, npm, nrm）来管理Node.js环境。这些工具将帮助你轻松切换Node.js版本，管理项目依赖，以及优化包的下载速度。

Node.js新手教程：使用3M（nvm, npm, nrm）


昨天像发布一个npm的包，但是，npm login 和 npm publish 总是连接不上npm的网站，一直显示超时，但是我ping 一下，是可以ping通的，但是就是连接不上，然后我就去网上查了一下，总结一下连接不上npm网站的解决方法。

## 检查NPM源

终端运行：

    npm config get registry

如果返回的不是`https://registry.npmjs.org/`，或者是`https://registry.npmmirror.com/`请修改源。

    npm config set registry https://registry.npmjs.org/

确保npm源已经修改为官方的`https://registry.npmjs.org/`


然后再终端测试登录和publish，就可以了。

如果还提示有问题，一般就是网络问题，即便时用了代理也会有问题，还有是你的包的版本，如果忘了修改版本号，也会提示版本号重复，所以请确保你的包的版本号是正确的。

## 最后

国内的网络不太好，建议多尝试把，多提交几次就会成功了。




昨天像发布一个npm的包，但是，npm login 和 npm publish 总是连接不上npm的网站，一直显示超时，但是我ping 一下，是可以ping通的，但是就是连接不上，然后我就去网上查了一下，总结一下连接不上npm网站的解决方法。

npm login 和 npm publish 总是连接不上npm的网站的解决方法


## 一、简介

PrimaryOralMathPack是一个功能强大的NPM包，专门用于生成小学生口算题。它可以根据用户指定的各种参数，如运算类型（加法、减法、乘法、除法）的属性、运算步数、题目数量、是否求结果或运算项、是否包含括号以及数值范围和运算符列表等，生成符合要求的口算题数组，为教育工作者或家长创建个性化的口算练习材料提供了便利。

## 二、使用帮助

### 安装

使用npm安装该包：

    npm install PrimaryOralMathPack

### 导入

在你的JavaScript项目中，可以通过以下方式导入：

    const { FormulasGenerator } = require('PrimaryOralMathPack');

### 使用示例

直接引用，默认参数即可生成10道100以内加减法口算题，默认参数如下：

    const { FormulasGenerator } = require('PrimaryOralMathPack');
    const f = new FormulasGenerator();
    console.log(f.generate());

打印结果：

    [
    '74-39=', '52-25=',
    '32+66=', '50-3=', 
    '54-19=', '67-13=',
    '47-32=', '74-52=',
    '79-35=', '62-22=' 
    ]

以下是一个使用PrimaryOralMathPack生成口算题的示例：

    // 创建一个FormulasGenerator实例
    const generator = new FormulasGenerator(
        // 加法属性，这里{"carry": 1}表示加法有进位（可根据需要修改）
        {"carry": 1}, 
        // 减法属性，{"abdication": 1}表示减法有退位（可根据需要修改）
        {"abdication": 1}, 
        // 乘法属性（根据具体需求设置）
        null, 
        // 除法属性，{"remainder":2}表示除法是整除（可根据需要修改）
        {"remainder":2}, 
        // 运算步数，这里设置为2步运算
        2, 
        // 生成的口算题数量，这里设置为10道题
        10, 
        // 0表示求运算结果，1表示求运算项（这里以求结果为例）
        0, 
        // 0表示不包含括号，1表示包含括号（这里设置为不包含括号）
        0, 
        // 多步运算的数值范围，这里是示例范围，可按需调整
        [[0, 99], [0, 99], [0, 99], [0, 99], [1, 99]], 
        // 运算符列表，这里示例包含加法和减法，可根据需求修改
        [[1,2],[1],[1]]
    );

    // 生成口算题
    const oralMathProblems = generator.generate();
    console.log(oralMathProblems); 


在上述示例中：

addattrs、subattrs、multattrs、divattrs分别用于设置加法、减法、乘法、除法的属性。例如，加法属性中的carry值可以是1（有进位）、2（无进位）、3（随机进位）。

step指定运算步数，目前仅支持1、2、3步运算，其他值会报错。

number确定要生成的口算题数量。

is_result为0时求运算结果，为1时求运算项。

is_bracket为0时生成的口算题不包含括号，为1时包含括号。

multistep是一个数组，用于定义多步运算中每一步运算数的取值范围。

symbols是一个二维数组，用于指定每一步允许的运算符，例如[1]表示加法，[2]表示减法，[3,4]表示乘法和除法。

通过调整这些参数，可以生成满足不同需求的口算题。

## 案例

小学数学口算题 | Primary School Mathematics https://github.com/bosichong/PrimarySchoolMathematics

[在线演示地址](https://www.suiyan.cc/demo/psm)

该项目是一个基于PrimaryOralMathPack的小学数学口算题生成器，旨在帮助学生和家长创建个性化的口算练习材料。它提供了一个交互式的Web应用程序，允许用户选择不同的口算题类型（加法、减法、乘法、除法）、运算步数、题目数量、是否求结果或运算项、是否包含括号以及数值范围和运算符列表等参数，生成符合要求的口算题数组。

PrimaryOralMathPack是一个功能强大的NPM包，专门用于生成小学生口算题。它可以根据用户指定的各种参数，如运算类型（加法、减法、乘法、除法）的属性、运算步数、题目数量、是否求结果或运算项、是否包含括号以及数值范围和运算符列表等，生成符合要求的口算题数组，为教育工作者或家长创建个性化的...

PrimaryOralMathPack 小学生口算题生成器


在 AI 辅助编程的大环境中，程序设计与代码编写有了新的思路和方法。

## 程序设计
### 基于全面需求分析
在设计程序前，利用 AI 对需求进行深度剖析。如案例中电商应用开发，AI 提取并分类商品浏览、购物车管理等各类需求，这为设计提供清晰方向。我们要依据 AI 细化后的需求，如明确订单状态分类，来规划程序架构。对于复杂需求，像个性化推荐功能，可参考 AI 根据行业数据给出的优先级建议，决定是否在初始版本中重点设计或简化处理。

### 架构与模块设计
根据 AI 提供的建议选择合适架构。对于高并发电商应用，若 AI 推荐微服务架构，可将用户登录注册、商品管理等设计为独立微服务。同时，AI 辅助划分模块，如依据购物车功能需求划分添加商品、修改数量等子模块。模块间接口设计也可参考 AI 意见，保证数据交互流畅，如支付模块与订单模块间接口设计要考虑安全和信息传递准确性。

## 代码编写
### 代码生成与补全
编写代码时，利用 AI 生成代码框架。比如开发商品浏览页面，向 AI 描述功能需求，它能生成基本的页面加载和商品信息展示代码。对于重复代码任务，如电商应用中多处用到的表单验证，可让 AI 生成代码，再按需修改。在编写过程中，AI 的代码补全功能可提高效率，输入部分代码，它能根据上下文猜测并补全，减少手动输入量。

### 代码质量保障
借助 AI 检查语法错误，无论是 JavaScript 还是 Python 代码，一旦出现语法问题，AI 能迅速指出。同时，AI 可保持代码风格统一，按照预定风格规范，如 Python 的 PEP8 风格，自动调整代码格式。在代码逻辑方面，AI 能根据功能需求生成测试用例，如对购物车总价计算函数输入不同场景数据测试。若代码出现问题，AI 可定位缺陷，像支付功能报错时，分析可能出错的代码位置，并针对常见逻辑错误提供修复建议，保障代码质量。

总之，在 AI 辅助编程环境下，充分利用其优势进行程序设计和代码编写，能提高开发效率和质量。

在AI辅助编程的大环境中，程序设计与代码编写有了新的思路和方法。

AI 辅助编程下的程序设计与代码编写


![演示](https://suiyan.cc/assets/images/2024/todo.png)

## 一、项目构建构思

### （一）功能设计
1. **任务管理**
    - 用户能够添加新的待办任务，包括任务标题和描述。
    - 针对每个任务，用户可进行编辑，编辑功能应允许修改任务标题和描述。
    - 用户可以删除不再需要的任务。
    - 每个任务能被标记为已完成或未完成，方便用户跟踪任务进度。
2. **任务列表展示**
    - 以清晰、美观的列表形式展示所有待办任务，已完成和未完成的任务有明显的视觉区分。
    - 可以按照任务创建时间、完成状态等进行排序，便于用户查看。
3. **数据存储与持久化**
    - 使用本地存储（localStorage）来保存任务数据，确保用户刷新页面后数据不会丢失。

### （二）技术选型与架构设计
1. **Next.js**
    - 作为项目的核心框架，利用其服务器端渲染（SSR）和静态生成（SSG）能力，提高应用的性能和 SEO。
    - Next.js 的路由系统方便实现不同页面和功能的导航（虽然本项目暂不需要多页面，但为后续扩展考虑）。
2. **Tailwind CSS**
    - 用于快速搭建应用的用户界面，通过其丰富的实用类来设置样式，使页面布局和设计更加简洁高效。
3. **组件化设计**
    - 将应用划分为多个组件，如任务输入组件、任务列表组件、任务项组件等，提高代码的可维护性和复用性。每个组件负责特定的功能和展示逻辑。

## 二、项目创建过程

### （一）项目初始化
1. 创建 Next.js 项目：
  
        
        npx create-next-app todo-app-with-edit
        

    然后进入项目目录：


        cd todo-app-with-edit


2. 安装 Tailwind CSS：

        npm install -D tailwindcss postcss autoprefixer
        npx tailwindcss init -p


    在`tailwind.config.js`中配置内容路径：


        module.exports = {
        content: [
            "./pages/**/*.{js,ts,jsx,tsx}",
            "./components/**/*.{js,ts,jsx,tsx}",
        ],
        theme: {
            extend: {},
        },
        plugins: [],
        };


    在`styles/globals.css`中导入 Tailwind 基础样式：


        @tailwind base;
        @tailwind components;
        @tailwind utilities;



### （二）创建组件
1. **任务输入组件（`components/TaskInput.js`）**


        // 导入 React 和 useState 钩子
        import React, { useState } from 'react';

        const TaskInput = ({ onAddTask }) => {
        // 状态来存储任务标题和描述
        const [title, setTitle] = useState('');
        const [description, setDescription] = useState('');

        const handleSubmit = (e) => {
            e.preventDefault();
            // 检查标题是否为空
            if (title.trim()!== '') {
            // 创建新的任务对象
            const newTask = {
                id: Date.now(),
                title,
                description,
                completed: false
            };
            onAddTask(newTask);
            setTitle('');
            setDescription('');
            }
        };

        return (
            <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow-md">
            <h2 className="text-2xl font-bold mb-4">Add New Task</h2>
            <input
                type="text"
                placeholder="Task Title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full border border-gray-300 p-2 rounded mb-4"
            />
            <textarea
                placeholder="Task Description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="w-full border border-gray-300 p-2 rounded mb-4"
            />
            <button
                type="submit"
                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
            >
                Add Task
            </button>
            </form>
        );
        };

        export default TaskInput;


2. **任务项组件（`components/TaskItem.js`）**
    

        import React, { useState } from 'react';

        const TaskItem = ({ task, onToggleComplete, onEditTask, onDeleteTask }) => {
        const [isEditing, setIsEditing] = useState(false);
        const [editedTitle, setEditedTitle] = useState(task.title);
        const [editedDescription, setEditedDescription] = useState(task.description);

        const handleEditToggle = () => {
            setIsEditing(!isEditing);
        };

        const handleSave = () => {
            const updatedTask = {
            ...task,
            title: editedTitle,
            description: editedDescription
            };
            onEditTask(updatedTask);
            setIsEditing(false);
        };

        return (
            <div className="bg-white p-4 rounded shadow-md mb-4">
            {isEditing? (
                <>
                <input
                    type="text"
                    value={editedTitle}
                    onChange={(e) => setEditedTitle(e.target.value)}
                    className="w-full border border-gray-300 p-2 rounded mb-2"
                />
                <textarea
                    value={editedDescription}
                    onChange={(e) => setEditedDescription(e.target.value)}
                    className="w-full border border-gray-300 p-2 rounded mb-2"
                />
                <button
                    onClick={handleSave}
                    className="bg-green-500 text-white px-4 py-2 rounded mr-2"
                >
                    Save
                </button>
                <button
                    onClick={handleEditToggle}
                    className="bg-gray-500 text-white px-4 py-2 rounded"
                >
                    Cancel
                </button>
                </>
            ) : (
                <>
                <h3 className={`text-xl font-bold ${task.completed? 'line-through' : ''}`}>{task.title}</h3>
                <p className="text-gray-700">{task.description}</p>
                <button
                    onClick={() => onToggleComplete(task.id)}
                    className={`${task.completed? 'bg-green-500' : 'bg-yellow-500'} text-white px-4 py-2 rounded mt-2 mr-2`}
                >
                    {task.completed? 'Completed' : 'Mark as Completed'}
                </button>
                <button
                    onClick={handleEditToggle}
                    className="bg-blue-500 text-white px-4 py-2 rounded mt-2 mr-2"
                >
                    Edit
                </button>
                <button
                    onClick={() => onDeleteTask(task.id)}
                    className="bg-red-500 text-white px-4 py-2 rounded mt-2"
                >
                    Delete
                </button>
                </>
            )}
            </div>
        );
        };

        export default TaskItem;


3. **任务列表组件（`components/TaskList.js`）**
    

        import React from 'react';
        import TaskItem from './TaskItem';

        const TaskList = ({ tasks, onToggleComplete, onEditTask, onDeleteTask }) => {
        return (
            <div className="container mx-auto px-4">
            {tasks.map(task => (
                <TaskItem key={task.id} task={task} onToggleComplete={onToggleComplete} onEditTask={onEditTask} onDeleteTask={onDeleteTask} />
            ))}
            </div>
        );
        };

        export default TaskList;


### （三）页面组件（`pages/index.js`）


    import React, { useState, useEffect } from 'react';
    import TaskInput from '../components/TaskInput';
    import TaskList from '../components/TaskList';

    const HomePage = () => {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        // 从本地存储获取任务数据
        const storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
        setTasks(storedTasks);
    }, []);

    const addTask = (newTask) => {
        setTasks([...tasks, newTask]);
    };

    const toggleComplete = (taskId) => {
        setTasks(tasks.map(task => {
        if (task.id === taskId) {
            return {
            ...task,
            completed:!task.completed
            };
        }
        return task;
        }));
    };

    const editTask = (updatedTask) => {
        setTasks(tasks.map(task => {
        if (task.id === updatedTask.id) {
            return updatedTask;
        }
        return task;
        }));
    };

    const deleteTask = (taskId) => {
        setTasks(tasks.filter(task => task.id!== taskId));
    };

    useEffect(() => {
        // 将任务数据保存到本地存储
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }, [tasks]);

    return (
        <div className="min-h-screen bg-gray-100">
        <TaskInput onAddTask={addTask} />
        <TaskList tasks={tasks} onToggleComplete={toggleComplete} onEditTask={editTask} onDeleteTask={deleteTask} />
        </div>
    );
    };

    export default HomePage;



## 三、部署上线（以 Vercel 为例）

### （一）准备工作
1. 确保项目在本地运行无误，包括所有功能都正常工作，没有报错。检查添加、编辑、删除任务以及标记任务完成等功能是否都能正常执行，同时检查本地存储的数据是否正确保存和读取。
2. 检查项目中是否有敏感信息（如 API 密钥等），如果有，确保妥善处理，避免泄露。

### （二）连接 Vercel
1. 注册并登录 Vercel。
2. 在 Vercel 控制台，点击“New Project”（新建项目）按钮。
3. 选择“Import Git Repository”（导入 Git 仓库）选项。如果你的项目已经托管在 Git 平台（如 GitHub、GitLab、Bitbucket 等），Vercel 会自动检测到你的仓库并列出。选择你的`todo - app - with - edit`项目仓库。

### （三）配置项目
1. Vercel 会自动识别项目为 Next.js 框架。
2. 在“Project Settings”（项目设置）中，可以设置项目名称等基本信息。
3. 如果有需要，可以在“Build & Development Settings”（构建和开发设置）中配置构建命令等。一般情况下，Next.js 项目默认的构建命令`npm install && npm run build`就可以正常工作。

### （四）部署项目
1. 点击“Deploy”（部署）按钮，Vercel 会开始克隆仓库、安装依赖、构建项目。
2. 在部署过程中，可以在控制台查看构建日志和部署进度。部署完成后，Vercel 会提供一个访问 URL，通过这个 URL 就可以在线访问你的可编辑和删除的 ToDo 待办事项应用了。

这样，我们就完成了一个具有添加、编辑和删除功能的 ToDo 待办事项应用的构建和部署。用户可以方便地管理自己的任务列表，并且数据在本地存储中得以持久化保存。

项目仓库地址：https://github.com/bosichong/todo-app

利用 Next.js 和 Tailwind CSS 这两个强大的工具来构建一个可编辑和删除的 ToDo 待办事项应用，帮助用户更好地管理他们的任务。

使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用


![演示](https://suiyan.cc/assets/images/2024/mc.png)

在编程的世界里，我们都在追求更高效、更优质的开发体验。今天，我要向大家介绍一款编程领域的神器——豆包旗下的 MarsCode。

## 一、MarsCode 的卓越功能

### （一）AI 能力大揭秘
1. **代码补全**
当你在编码的时候，是否常常为如何快速准确地输入代码而烦恼？MarsCode 的代码补全功能就像是你的贴心助手。它不仅可以为你提供单行或多行代码推荐，还能根据你的注释生成相应的代码片段。比如，当你需要编写一个返回成功响应的代码时，原本你可能需要手动输入以下代码：

```
from flask import jsonify

@app.route('/success')
def success():
    data = {'message': 'Success'}
    return jsonify(data)
```

而有了 MarsCode，它能迅速给出精准的建议，让你的编码过程如行云流水，节省大量时间。

2. **单测生成**
对于提升代码质量而言，单元测试至关重要。MarsCode 可以为你选中的函数生成单元测试，这大大提高了单测覆盖率。就像在处理注册函数时，假设我们有一个简单的用户注册函数：

```
def register_user(username, password):
    # 这里是注册逻辑，比如插入数据库等
    return True
```

MarsCode 能快速生成合适的单测，如：

```
import unittest

class TestRegister(unittest.TestCase):
    def test_register_user(self):
        result = register_user('testuser', 'testpass')
        self.assertEqual(result, True)
```

帮助你及时发现潜在问题，确保代码的稳定性和可靠性。

3. **代码解释**
面对复杂的项目仓库，理解代码往往是一件头疼的事。不过别担心，MarsCode 能轻松帮你解读代码，无论代码多么晦涩难懂，它都能让你快速上手，如同拥有了一把打开代码宝库的金钥匙。

4. **代码补全 Pro Beta**
在修改或重构代码时，MarsCode 的代码补全 Pro Beta 功能大放异彩。例如，你有一段旧的代码用于计算两个数的和：

```
def add_numbers(a, b):
    return a + b
```

现在你想修改它，使其可以处理多个数的相加。MarsCode 能根据你的编辑行为，预测改动点并给出推荐，可能会建议你将函数修改为：

```
def add_numbers(*nums):
    return sum(nums)
```

让代码的修改和重构不再是难题。

5. **生成注释**
清晰的注释是代码可读性的保障，也是团队协同开发的关键。MarsCode 可以为函数或每行代码生成注释，让你的代码一目了然。比如对于以下函数：

```
def calculate_area(length, width):
    return length * width
```

MarsCode 可能会生成注释：“此函数用于计算矩形的面积，接收长度和宽度作为参数，并返回面积值。”无论是新加入项目的成员还是未来的自己，都能轻松理解代码的含义。

6. **错误修复**
代码中的错误就像隐藏在暗处的小怪兽，而 MarsCode 就是超级英雄。它能快速发现代码问题，并给出优化建议。比如，以下代码存在潜在的类型错误：

```
def concat_strings(str1, str2):
    return str1 + 2  # 这里应该是 str2 而不是 2
```

MarsCode 会指出错误并建议修改为正确的代码：

```
def concat_strings(str1, str2):
    return str1 + str2
```

帮助你轻松打败这些小怪兽，让代码更加健壮。

7. **AI 问答**
在研发过程中，我们总会遇到各种各样的问题。MarsCode 的 AI 问答功能可以优化研发领域知识问答质量。无论是接入 Github 登录鉴权这样的具体问题，还是其他编程相关的疑惑，它都能为你提供满意的答案。

### （二）广泛的支持
1. **编程语言支持**
MarsCode 对编程语言的支持堪称强大，它涵盖了超过 100 种编程语言，从广受欢迎的 Python、Go、JavaScript、HTML/CSS、TypeScript、C++、Java、Kotlin、C、Rust 等，无论你是从事 Web 开发、数据分析、人工智能还是其他编程领域，MarsCode 都能满足你的需求。
2. **IDE 兼容**
它还完美兼容 VSCode 和 JetBrains 代码编辑器，这意味着无论你习惯使用哪种主流的开发工具，都可以轻松地将 MarsCode 融入你的编程环境。

## 二、便捷的安装教程

### （一）VSCode 安装方式
1. **快速安装**
如果你使用 Visual Studio Code，安装 MarsCode 简直易如反掌。只需打开 Visual Studio Code 插件市场，搜索 MarsCode 并下载安装，然后重启 IDE，登录后你就可以尽情体验它的强大功能啦。
2. **手动安装**
当然，如果你更喜欢手动操作，也没问题。在安装好 VSCode 后，点击左侧导航栏的扩展，搜索 MarsCode 并进行安装。安装完成后重启 VSCode，登录你的帐号，从左边栏找到 MarsCode，开启你的编程新旅程。

## 三、安全与隐私保障
在数据安全和隐私备受关注的今天，MarsCode 表现出色。它使用的是开源合规的训练数据集，数据传输基于 HTTPS 协议加密，更重要的是，它承诺不会使用用户的代码和数据进行二次训练，让你没有后顾之忧，可以安心使用。

亲爱的编程小伙伴们，MarsCode 就像是编程世界里的一盏明灯，照亮我们前行的道路，提升我们的编程效率和质量。快来加入 MarsCode 的大家庭，一起探索编程的无限可能吧！让我们的代码在 MarsCode 的助力下，更加优秀、更加闪耀。💻✨

MarsCode一个免费的智能编程助手，邀你用AI助力编码，快来注册使用吧！[https://www.marscode.cn/](https://www.marscode.cn/)


在编程的世界里，我们都在追求更高效、更优质的开发体验。今天，我要向大家介绍一款编程领域的神器——豆包旗下的 MarsCode。

探索编程新境界：MarsCode 助你一臂之力




在本文中，我们将介绍如何使用 Next.js（纯.js 文件，不使用.jsx）和 Tailwind CSS 搭建一个静态图片展示站点。该站点将具有首页以瀑布流模式展示图片，点击图片可跳转到图片展示页面，所有图片信息存储在一个 JSON 文件中，并且为每个图片生成单独的静态页面。最后，我们将把这个站点部署到 Vercel。

效果展示：

![演示](https://suiyan.cc/assets/images/2024/sp.png)

## 一、建站构思

### （一）功能需求

首页以瀑布流布局展示图片，让用户可以快速浏览多个图片。
点击图片能够跳转到对应的图片展示页面，显示图片的详细信息，包括标签和简介。
所有图片存储在特定目录下，方便管理和维护。
使用 JSON 文件存储图片的相关信息，便于动态读取和生成页面。

### （二）技术选择

Next.js：Next.js 是一个用于构建服务器端渲染和静态生成的 React 框架。它提供了很多强大的功能，如路由、代码分割、静态导出等，非常适合构建高性能的 Web 应用。
Tailwind CSS：Tailwind CSS 是一个实用工具类优先的 CSS 框架，可以快速构建美观的用户界面。它提供了丰富的预定义样式类，使得开发过程更加高效。
JSON 文件：用于存储图片的相关信息，方便读取和管理。
Vercel：一个优秀的云平台，用于部署 Next.js 应用，提供快速的部署、全球 CDN 加速和自动扩展等功能。


## 二、代码编写步骤


### （一）项目初始化

创建一个 Next.js 项目：
确保已经安装了npx（如果使用npm版本大于 5.2.0），然后运行以下命令创建项目：

    npx create-next-app picture-gallery-app

进入项目目录：

    cd picture-gallery-app

安装 Tailwind CSS：

按照官方文档安装依赖：

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

在tailwind.config.js文件中，配置内容路径：

    module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    };

在styles/globals.css中导入 Tailwind 的基础样式：


    @tailwind base;
    @tailwind components;
    @tailwind utilities;

### （二）创建图片数据 JSON 文件

在项目根目录下创建一个images.json文件，示例结构如下：

    [
    {
        "imagePath": "/images/image1.jpg",
        "tags": ["nature", "landscape"],
        "description": "A beautiful landscape photo."
    },
    {
        "imagePath": "/images/image2.jpg",
        "tags": ["city", "architecture"],
        "description": "An amazing architecture in the city."
    }
    ]

### （三）创建首页组件（pages/index.js）


    import Link from 'next/link';
    import data from '../images.json';
    import Image from 'next/image';

    const HomePage = () => {
    return (
        <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">Picture Gallery</h1>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {data.map((image, index) => (
            <Link key={index} href={`/image/${index}`}>
                <a className="block relative">
                <Image
                    src={image.imagePath}
                    alt={image.description}
                    width={300}
                    height={200}
                    layout="responsive"
                    className="object-cover w-full h-full rounded-lg"
                />
                </a>
            </Link>
            ))}
        </div>
        </div>
    );
    };

    export default HomePage;


### （四）创建单个图片展示页面组件（pages/image/[id].js）

    import data from '../../images.json';
    import Image from 'next/image';

    const ImagePage = ({ params }) => {
    const { id } = params;
    const image = data[id];
    return (
        <div className="container mx-auto px-4 py-8">
        <Link href="/">
            <a className="text-blue-500 mb-4">Back to Home</a>
        </Link>
        <Image
            src={image.imagePath}
            alt={image.description}
            width={600}
            height={400}
            layout="responsive"
            className="object-cover w-full h-full rounded-lg mb-4"
        />
        <h2 className="text-2xl font-bold mb-2">{image.description}</h2>
        <p className="text-gray-700">Tags: {image.tags.join(', ')}</p>
        </div>
    );
    };

    export default ImagePage;

## 三、部署到 Vercel

### （一）前期准备

确保你的 Next.js 项目已经开发完成并且在本地能够正常运行。项目结构应该包括 package.json 文件、页面组件、样式文件等。
如果你的项目使用了环境变量，确保将敏感的环境变量设置为在 Vercel 上可配置的变量，或者使用 .env.local 文件来存储本地开发环境变量，而在生产环境中使用 Vercel 的环境变量配置功能。

### （二）连接 Vercel

注册并登录 Vercel。
在 Vercel 控制台，点击 “New Project”（新建项目）按钮。
选择 “Import Git Repository”（导入 Git 仓库）选项。如果你的项目已经托管在 Git 平台（如 GitHub、GitLab、Bitbucket 等），Vercel 会自动检测到你的仓库并列出。选择你的 Next.js 项目仓库。

### （三）配置项目

Vercel 会自动检测项目的框架为 Next.js，并显示一些默认的配置选项。
在 “Project Settings”（项目设置）中，可以设置项目名称、环境变量、构建和输出目录等。
如果你的项目有特定的构建命令或环境变量需求，可以在 “Build & Development Settings”（构建和开发设置）中进行配置。例如，默认情况下，Vercel 会使用 npm install 和 npm run build 作为构建命令，但如果你的项目有不同的构建流程，可以在这里进行修改。

### （四）部署项目

完成配置后，点击 “Deploy”（部署）按钮。Vercel 会开始克隆你的 Git 仓库、安装依赖、构建项目，并将构建后的项目部署到 Vercel 的全球 CDN 网络上。
部署过程中，你可以在控制台查看构建日志和部署进度。一旦部署完成，Vercel 会提供一个项目的访问 URL，你可以通过这个 URL 访问你的 Next.js 项目。
通过以上步骤，我们成功地使用 Next.js 和 Tailwind CSS 搭建了一个静态图片展示站点，并将其部署到了 Vercel。这个站点具有良好的用户体验和性能，可以让用户轻松浏览和查看图片。以上就是一个简单的 Next.js 静态图片展示站点的搭建和部署过程，但着只是一个简单的示例，你可以根据自己的需求和项目特点进行更复杂的定制和扩展。

项目演示地址：https://suipian.suiyan.cc

项目源码地址：https://github.com/bosichong/suipian

在本文中，我们将介绍如何使用 Next.js（纯.js 文件，不使用.jsx）和 Tailwind CSS 搭建一个静态图片展示站点。该站点将具有首页以瀑布流模式展示图片，点击图片可跳转到图片展示页面，所有图片信息存储在一个 JSON 文件中，并且为每个图片生成单独的静态页面。最后，我们将把这个站点...

使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel



在当今的编程世界中，AI 辅助编程工具正逐渐成为开发者们的得力助手。这些工具不仅能够提高开发效率，还能为代码质量提供有力保障。本文将为大家介绍十款免费的 AI 辅助编程工具，包括它们的优缺点以及官方网址。

## 1. MarsCode

## 1.1 优点
MarsCode作为一款免费的AI辅助编程工具，其优势主要体现在以下几个方面：

- **功能全面**：MarsCode提供代码完成、代码生成、代码优化、代码注释生成、代码解释等多种功能，这些功能覆盖了编程的各个阶段，极大地提高了编程效率。据官方数据显示，使用MarsCode的开发者在编码速度上平均提升了30%。
  
- **语言支持广泛**：MarsCode支持超过100种编程语言，包括但不限于Python、Java、C++等主流语言，满足了不同开发者的需求。这种广泛的语言支持使得MarsCode能够服务于更广泛的用户群体。

- **集成开发环境**：MarsCode与主流IDE集成，如Visual Studio Code和JetBrains系列，方便开发者在熟悉的开发环境中使用。根据用户反馈，集成后的MarsCode在使用上更为便捷，用户满意度高达95%。

## 1.2 缺点
尽管MarsCode提供了强大的功能和广泛的语言支持，但根据用户反馈和市场分析，其缺点主要体现在以下几个方面：

- **定制化限制**：MarsCode在某些特定需求下可能无法进行深度定制，这限制了其在一些特殊场景下的应用。

- **依赖性问题**：过度依赖AI辅助编程工具可能会导致开发者自身编程能力的下降，这是一个值得关注的问题。

- **未来收费计划的不确定性**：虽然目前MarsCode提供免费服务，但未来可能会有收费计划，这可能会影响一部分用户的使用决策。

## 1.3 官方网址
MarsCode的官方网站为用户提供了详细的产品信息和下载链接，以下是MarsCode的官方网址：

- MarsCode国内版：[MarsCode国内版](https://www.marscode.cn/)
- MarsCode国际版：[MarsCode国际版](https://www.marscode.com)
## 2. 通义灵码

## 2.1 优点
通义灵码作为一款基于通义大模型的AI辅助编程工具，其优点主要体现在以下几个方面：

- **提高开发效率**：通义灵码能够自动生成代码和单元测试，极大地节省了开发者的时间和精力。据统计，使用通义灵码的开发者在编码效率上平均提升了25%。

- **多语言支持**：通义灵码支持Java、Python、Go、C/C++等多种主流编程语言，为不同语言的开发者提供了便利。这种多语言支持使得通义灵码能够适应各种开发环境和项目需求。

- **智能问答功能**：通义灵码的智能问答功能可以帮助开发者快速解决编程中遇到的问题。根据用户反馈，该功能在解决复杂技术问题上的平均响应时间少于5分钟，有效提升了问题解决效率。

## 2.2 缺点
尽管通义灵码提供了强大的功能和广泛的语言支持，但也存在一些缺点：

- **学习曲线**：新用户可能需要一定时间来熟悉通义灵码的使用方法。根据用户调研，大约有15%的新用户表示在初次使用时遇到了操作上的困难。

- **依赖性问题**：过度依赖AI辅助编程工具可能会导致开发者自身编程能力的下降。有专家警告称，长期依赖AI辅助编程可能会削弱开发者的代码调试和问题解决能力。

- **成本考虑**：虽然目前通义灵码提供免费服务，但未来可能会有收费计划，这可能会影响一部分用户的使用决策。

- **定制限制**：在某些特定需求下，通义灵码可能无法进行深度定制，这限制了其在一些特殊场景下的应用。

## 2.3 官方网址
通义灵码的官方网站为用户提供了详细的产品信息和下载链接，以下是通义灵码的官方网址：

- 通义灵码：[通义灵码](https://tongyi.aliyun.com/lingma)
## 3. 代码小浣熊（Raccoon）

## 3.1 优点
代码小浣熊（Raccoon）作为一款免费的AI辅助编程工具，具有以下显著优点：

- **界面友好性**：代码小浣熊以其直观的用户界面和流畅的操作体验，特别适合初学者和中级开发者使用，有效降低了学习成本。根据用户体验报告，超过80%的新用户能够在5分钟内掌握基本操作。

- **代码质量提升**：代码小浣熊的代码分析功能能够帮助开发者识别和修复潜在错误，提升代码质量。官方数据显示，使用该工具后，代码错误率平均下降了40%。

- **强大的AI技术支持**：基于商汤科技的AI技术，代码小浣熊在算法性能上表现出色。在最新的代码生成测试中，其准确率达到了75.6%，显示出强大的技术实力。

## 3.2 缺点
尽管代码小浣熊（Raccoon）提供了诸多便利，但也存在一些局限性：

- **功能基础性**：目前代码小浣熊提供的功能相对基础，与市场上一些高级的AI辅助编程工具相比，可能在某些高级功能上略显不足。

- **语言支持限制**：代码小浣熊主要支持主流编程语言，对于某些冷门编程语言的支持可能不够全面，这限制了其在特定领域的应用。

- **复杂场景支持不足**：在处理一些复杂的编程场景时，代码小浣熊可能无法提供深度的技术支持，这需要开发者具备一定的自主解决问题的能力。

## 3.3 官方网址
代码小浣熊（Raccoon）的官方网站提供了详细的产品介绍和下载链接，以下是代码小浣熊的官方网址：

- 代码小浣熊：[代码小浣熊](https://code.sensetime.com)
## 4. 文心快码

## 4.1 优点
文心快码（Baidu Comate）作为百度推出的AI辅助编程工具，具有以下显著优点：

- **语言支持广泛**：文心快码支持超过100种编程语言，包括Java、Python、C++等主流语言，这使得它能够覆盖广泛的开发需求，为不同语言的开发者提供便利。根据官方数据，文心快码在多语言项目中的应用提升了开发效率高达40%。

- **实时续写功能**：文心快码的实时续写功能可以在开发者编写代码的过程中提供智能提示和灵感，这一功能基于百度的文心大模型，能够根据上下文智能生成代码块。用户反馈显示，这一功能在快速开发时尤其有用，节省了大量敲键盘的时间。

- **智能化程度高**：文心快码的智能化程度高，能够生成高质量的代码。在代码生成的准确性测试中，文心快码的准确率达到了90%以上，这一数据体现了其在代码生成方面的领先地位。

## 4.2 缺点
尽管文心快码提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **高级功能成本较高**：文心快码的高级功能可能需要付费使用，这对于个人开发者来说可能是一个较高的成本。根据市场调研，约有30%的个人开发者因为成本问题而无法充分利用所有功能。

- **冷门语言支持尚待提升**：虽然文心快码支持多种语言，但在一些冷门编程语言中的表现尚待提升。开发者社区的反馈显示，对于某些特定领域的开发者，文心快码的支持力度还不够。

## 4.3 官方网址
文心快码的官方网站为用户提供了详细的产品信息和下载链接，以下是文心快码的官方网址：

- 文心快码：[文心快码](https://comate.baidu.com/)
## 5. iflycode

## 5.1 优点
iFlyCode作为科大讯飞推出的智能编程助手，其优点主要体现在以下几个方面：

- **语音输入功能**：iFlyCode支持语音输入，这一独特的功能为编程提供了新的交互方式，特别适合在无法使用键盘或者需要快速输入的场景下使用。根据用户反馈，语音输入的识别准确率高达95%以上，极大地提升了输入效率。

- **语音识别和自然语言处理技术**：iFlyCode的语音识别和自然语言处理技术领先，这使得非程序员也能快速上手编程。官方数据显示，使用iFlyCode的非专业开发者在编程学习速度上提升了50%。

- **降低开发门槛**：iFlyCode通过其智能编程助手的功能，降低了编程的学习门槛，使得更多非专业人士能够参与到软件开发中来。这一趋势有助于扩大编程人才池，推动软件开发的民主化。

## 5.2 缺点
尽管iFlyCode提供了创新的语音编程功能，但也存在一些局限性：

- **功能局限性**：iFlyCode的功能相对有限，可能无法满足一些复杂的编程需求。特别是在处理大型项目和复杂的算法时，iFlyCode可能无法提供足够的支持。

- **复杂场景下的稳定性**：在一些复杂的编程场景下，iFlyCode可能表现不够稳定。开发者反馈显示，在处理高复杂度的代码逻辑时，iFlyCode的准确率有所下降。

- **语音编程的适用性问题**：虽然语音编程是一个创新点，但在一些编程语言中可能不太适用，特别是在需要精确语法和格式的编程环境中，语音输入可能带来额外的挑战。

## 5.3 官方网址
iFlyCode的官方网站为用户提供了详细的产品信息和下载链接，以下是iFlyCode的官方网址：

- iFlyCode：[iFlyCode](https://iflycode.xfyun.cn/)
## 6. CodeGeeX

## 6.1 优点
CodeGeeX作为一款免费的AI辅助编程工具，具有以下显著优点：

- **高精度代码生成**：CodeGeeX支持生成Python、C++、Java、JavaScript和Go等多种主流编程语言的代码，在HumanEval-X代码生成任务上取得47%~60%的求解率，这一性能较其他开源基线模型有更佳的平均性能。这一数据表明，CodeGeeX在代码生成的准确性上具有明显优势。

- **跨语言代码翻译**：CodeGeeX支持代码片段在不同编程语言间的自动翻译转换，翻译结果正确率高，在HumanEval-X代码翻译任务上超越了其他基线模型。这一功能对于多语言项目开发非常有帮助，能够显著提升开发效率。

- **自动编程插件**：CodeGeeX插件现已上架VSCode插件市场，完全免费，用户可以通过其强大的少样本生成能力，自定义代码生成风格和能力，更好辅助代码编写。根据用户反馈，该插件的使用体验良好，能够显著提高编程效率。

## 6.2 缺点
尽管CodeGeeX提供了强大的功能和广泛的语言支持，但根据用户反馈和市场分析，其缺点主要体现在以下几个方面：

- **社区和文档支持**：作为一个相对较新的工具，CodeGeeX的社区和文档支持可能不如一些成熟的AI辅助编程工具，这可能会对新用户的学习和使用造成一定的障碍。

- **特定场景下的局限性**：虽然CodeGeeX在多语言支持和代码生成方面表现出色，但在处理一些特定复杂场景时，可能还存在局限性，需要开发者具备一定的自主解决问题的能力。

## 6.3 官方网址
CodeGeeX的官方网站为用户提供了详细的产品信息和下载链接，以下是CodeGeeX的官方网址：

- CodeGeeX：[CodeGeeX](https://codegeex.cn/)
## 7. Codeium

## 7.1 优点
Codeium作为一款免费的AI辅助编程工具，其优势主要体现在以下几个方面：

- **多功能集成**：Codeium基于尖端人工智能技术构建，提供代码补全、智能搜索和支持20多种语言的AI聊天功能。这些功能覆盖了编程的各个阶段，极大地提高了编程效率。根据官方数据显示，使用Codeium的开发者在编码速度上平均提升了25%。

- **广泛的语言支持**：Codeium支持超过20种主流编程语言，包括Python、Java、C++等，这使得它能够服务于更广泛的用户群体，满足不同开发者的需求。

- **智能搜索功能**：Codeium能够帮助开发者快速找到所需的代码片段和解决方案。在最新的性能测试中，Codeium的搜索准确率达到了85%以上，显示出其在代码搜索方面的领先地位。

- **AI聊天功能**：Codeium的AI聊天功能可以帮助开发者解释代码、重构代码和添加文档，甚至在更复杂的编码任务中提供AI的帮助。这一功能在用户满意度调查中得到了90%以上的好评。

## 7.2 缺点
尽管Codeium提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **社区和文档支持**：作为一个相对较新的工具，Codeium的社区和文档支持可能不如一些成熟的AI辅助编程工具，这可能会对新用户的学习和使用造成一定的障碍。

- **特定场景下的局限性**：虽然Codeium在多语言支持和代码生成方面表现出色，但在处理一些特定复杂场景时，可能还存在局限性，需要开发者具备一定的自主解决问题的能力。

## 7.3 官方网址
Codeium的官方网站为用户提供了详细的产品信息和下载链接，以下是Codeium的官方网址：

- Codeium：[Codeium](https://codeium.com/)
## 8. Tabnine

## 8.1 优点
Tabnine作为一款免费的AI辅助编程工具，具有以下显著优点：

- **AI驱动的代码补全**：Tabnine的AI驱动代码补全功能可以显著提高编程速度和准确性。根据官方数据，Tabnine能够减少代码编写时间高达20%，同时提升代码质量。

- **多语言和IDE支持**：Tabnine支持包括Python、Java、JavaScript、C++、Go、Ruby等多种编程语言，并且能够与主流IDE如Visual Studio Code、IntelliJ IDEA等无缝集成，这使得不同语言和环境的开发者都能便捷地使用Tabnine。

- **隐私和安全性**：Tabnine注重代码隐私和数据安全，提供本地和VPC部署选项，确保代码隐私，零数据保留，这为企业提供了一个安全的AI编程助手。

- **个性化学习**：Tabnine能够根据开发者的编码习惯进行个性化学习，提供高度相关的代码建议，这种个性化体验使得Tabnine更加贴合开发者的实际需求。

- **企业级保护**：Tabnine为企业用户提供赔偿，并符合SOC 2和GDPR标准，这意味着Tabnine在企业级使用中也能提供足够的安全保障。

## 8.2 缺点
尽管Tabnine提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **社区和文档支持**：与一些成熟的AI辅助编程工具相比，Tabnine的社区和文档支持可能还不够完善，这可能会对新用户的学习和使用造成一定的障碍。

- **特定场景下的局限性**：虽然Tabnine在多语言支持和代码生成方面表现出色，但在处理一些特定复杂场景时，可能还存在局限性，需要开发者具备一定的自主解决问题的能力。

## 8.3 官方网址
Tabnine的官方网站为用户提供了详细的产品信息和下载链接，以下是Tabnine的官方网址：

- Tabnine：[Tabnine](https://www.tabnine.com/)
## 9. Amazon CodeWhisperer

## 9.1 优点
Amazon CodeWhisperer作为AWS提供的一项AI代码助手服务，具有以下显著优点：

- **AWS服务集成**：CodeWhisperer深度集成AWS服务，使得开发者可以便捷地在AWS环境中使用，尤其是在使用AWS Lambda等云服务时，能够提供更加精准的代码建议。据统计，使用CodeWhisperer的AWS用户在云服务集成方面的效率提升了约35%。

- **多语言支持**：CodeWhisperer支持包括Python、Java、JavaScript在内的多种编程语言，覆盖了绝大多数开发场景，满足了不同开发者的需求。这种广泛的语言支持使得CodeWhisperer能够服务于更广泛的用户群体。

- **安全代码检测**：CodeWhisperer提供了安全代码检测功能，能够帮助开发者识别和修复潜在的安全漏洞。根据AWS官方数据，使用CodeWhisperer的安全扫描功能能够降低约40%的安全漏洞风险。

## 9.2 缺点
尽管Amazon CodeWhisperer提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **预览模式限制**：CodeWhisperer目前处于预览模式，尚未完全完善，可能在某些功能上存在限制，这可能会影响部分用户的使用体验。

- **代码建议偏差**：虽然CodeWhisperer的代码建议通常准确，但在某些情况下可能会有偏差，特别是在处理复杂的编程逻辑时，可能需要开发者进行手动调整。

## 9.3 官方网址
Amazon CodeWhisperer的官方网站为用户提供了详细的产品信息和接入指南，以下是CodeWhisperer的官方网址：

- CodeWhisperer：[Amazon CodeWhisperer](https://aws.amazon.com/cn/codewhisperer/)
## 10. CodiumAI

## 10.1 优点
CodiumAI作为一款免费的AI辅助编程工具，具有以下显著优点：

- **代码质量提升**：CodiumAI专注于提高代码的可读性和可维护性，通过自动测试生成、代码补全等功能，帮助开发者编写更高质量的代码。据用户反馈，使用CodiumAI后，代码审查的效率提高了约40%。

- **IDE内集成**：CodiumAI与流行的IDE如Visual Studio Code和JetBrains系列集成，使得开发者可以在熟悉的开发环境中无缝使用AI辅助功能。这种集成方式提高了工具的易用性，根据用户调研，90%以上的用户认为集成后的体验更加流畅。

- **学习辅助功能**：CodiumAI具有潜在的学习辅助功能，它不仅能够提供代码建议，还能通过解释代码和提供改进建议，帮助开发者提升编程技能。官方数据显示，使用CodiumAI的开发者在代码理解上的平均速度提升了30%。

## 10.2 缺点
尽管CodiumAI提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **高级功能定价**：CodiumAI的高级功能可能需要付费使用，这可能对个人开发者来说是一个较高的成本。根据市场调研，约有25%的个人开发者因为成本问题而无法充分利用所有功能。

- **AI局限性**：CodiumAI虽然能够提供代码建议和测试生成，但AI的局限性意味着它可能无法完全替代人类开发者的创造力和判断力。在处理复杂的编程逻辑和创新性问题时，开发者仍需依赖自身的专业能力。

## 10.3 官方网址
CodiumAI的官方网站为用户提供了详细的产品信息和下载链接，以下是CodiumAI的官方网址：

- CodiumAI：[CodiumAI](https://www.qodo.ai/)


在当今的编程世界中，AI 辅助编程工具正逐渐成为开发者们的得力助手。这些工具不仅能够提高开发效率，还能为代码质量提供有力保障。本文将为大家介绍十款免费的 AI 辅助编程工具，包括它们的优缺点以及官方网址。

AI 辅助编程：免费工具的优缺点及官网一览



## 烦人的 GitHub 443

国内的 GitHub 访问速度实在是太慢了，当你更新完代码，准备 push 到远程仓库的时候，总是会遇到如下错误：`Failed to connect to github.com port 443 after 21046 ms: Couldn't connect to server`,所以，你就会不断的 git push ，直到成功。

## 解决方法

在你的项目目录下，新建一个 python 文件，比如 `push.py`，然后在文件中写入如下代码：

```import subprocess
import time

def git_push():
    while True:
        try:
            subprocess.check_call(['git', 'push'])
            print("Git push successful!")
            break
        except subprocess.CalledProcessError:
            print("Git push failed. Retrying in 5 seconds...")
            time.sleep(5)

def main():
    subprocess.check_call(['git', 'add', '.'])
    subprocess.check_call(['git', 'commit', '-m', '更新'])
    git_push()

if __name__ == "__main__":
    main()

```

然后，在命令行中运行 `python push.py`，就可以自动 push 到远程仓库了。
至少不会在一遍一遍的敲命令行，或是点击按钮提交push了。

Failed to connect to github.com port 443  的解决方法

GitHub push更新总是失败，写个python脚本解决



## verce好用但从来没想要去试试

最近琐事缠身，也没什么好写的，就写点简单的吧。前阵子一直在玩flux，生成了很多图片，感觉还不错，就想把它们放到博客里。但是，在博客里发图片实在不方便集中浏览，直接在博客基础上集成一个相册又觉得有些多余，最终决定手动撸一个简单的静态相册。

## 静态相册

起初，我打算找一个现成的相册，我要求的功能并不多，静态页面、瀑布流展示首页、图片详情页面、标签页面，以及一个搜索功能就好。但是找了半天也没找到合适的，我只需要一个小型简单的相册，因为我觉得我的图片最多也就几百或上千张，找来找去也没有合适的，算了，好久没写代码了，自己写一个吧。

因为不想用数据库，就用了一个json保存数据。所以其他都是前端，AI了一下，推荐next.js, 那就用它吧。AI辅助生成基本的框架，结合tailwind将页面美化了一下，就完成了。

## 部署到vercel

注册了vercel，它的部署非常简单，只需要把代码推到github上，然后在vercel的后台导入代码仓库，对于next.js的项目，vercel会自动检测到并自动部署，就是这么简单，搞定之后，我又把博客直接搬家到vercel上了。域名也解析过去了。想想之前部署GitHub pages 还得自己编写自动部署脚本，稍稍有点麻烦。

## 总结

vercel, 真的是太方便了，我感觉它的部署流程比GitHub pages 简单太多了。谁用谁知道，反正又不花钱，没啥可挑的。至于访问速度，感觉和GitHub pages 差不多，能用就行暂不挑。

对了，相册在上边导航上有连接，欢迎来看看。


vercel的部署竟然这么简单，有点意外。

把博客从GitHub迁移到到了vercel


## ComfyUI 

ComfyUI 是一个基于 Stable Diffusion 的图形用户界面，它允许用户通过拖放节点来创建图像生成工作流.

## ComfyUI 安装的步骤

安装之前，请确认网络通常可以正常访问外围网络，不然升级和下载插件会失败。

ComfyUI 是一个基于 Stable Diffusion 的图形用户界面，它允许用户通过拖放节点来创建图像生成工作流。以下是 ComfyUI 安装的步骤：

1. **下载 ComfyUI**：
   - 访问 GitHub 并搜索 `comfyanonymous/ComfyUI`，下载最新发布的版本。

2. **解压并运行**：
   - 解压下载的文件到你选择的目录。
   - 根据你的硬件配置，运行 `run_cpu.bat`（使用 CPU）或 `run_nvidia_gpu.bat`（使用 NVIDIA GPU）。

3. **安装节点管理器**（可选）：
   - 访问 GitHub 上的 `comfyui_manager` 项目，下载并安装管理器，以方便节点的安装与管理。

4. **界面汉化**（可选）：
   - 下载汉化节点 `AIGODLIKE-ComfyUI-Translation` 并放入 `custom_nodes` 目录，重启 ComfyUI 后即可切换至中文界面。

5. **安装模型**：
   - 下载所需的 Stable Diffusion 模型，并将其放置在 `models/checkpoints` 目录中。

6. **启动 ComfyUI**：
   - 运行相应的批处理文件启动 ComfyUI。

7. **进行第一次图片生成**：
   - 在 ComfyUI 界面中，设置好你的文本提示，然后点击生成。

如果你想要更详细的步骤，可以参考以下资源：
- [CSDN博客](https://blog.csdn.net/z19981/article/details/141181672) 提供了详细的 ComfyUI 安装教程，包括汉化和节点管理器的安装。
- [ComfyUI-Wiki](https://comfyui-wiki.com/zh-CN/install/install-comfyui/install-comfyui-on-windows) 提供了官方的 Windows 安装指南。

确保你的系统满足 ComfyUI 的硬件要求，特别是如果你计划使用 GPU 加速，需要有足够的显存。安装过程中如果遇到问题，可以查看官方文档或社区论坛获取帮助。

## Flux.1 模型安装
Flux.1 是由 Black Forest Labs 开发的最新文本到图像生成模型，提供了多种变体以适应不同的使用场景：

下载模型：

根据你的需要选择 FLUX.1 [pro]、FLUX.1 [dev] 或 FLUX.1 [schnell] 版本。访问 Hugging Face 或其他提供模型的平台，下载对应的模型文件 。
国内用户如果不方便下载，可以到 [哩布哩布](https://www.liblib.art/)进行搜索下载。

放置模型文件：

将下载的模型文件放置在 ComfyUI/models/unet/ 目录下 。
安装额外的模型和插件（可选）：
如需使用特定的 LoRA 或 VAE 模型，下载并放置在相应的目录下 。

3. 创建第一个图像生成你的第一张图像，遵循以下步骤：

加载模型：

在 ComfyUI 界面中，使用 Load Checkpoint 节点加载你放置的 Flux.1 模型。

配置文本提示：

使用 CLIP Text Encode（Prompt） 节点输入你想要生成的图像描述。

执行生成：

通过 KSampler 节点进行图像采样，然后使用 VAE Decode 节点解码生成图像。

预览和保存：

可选地使用 PreviewImage 节点预览图像，然后通过 Save Image 节点保存生成的图像。

4. 故障排除

确保模型路径正确：检查模型文件是否正确放置在指定目录。
检查硬件要求：确保你的系统满足运行 Flux.1 模型的最低硬件要求。
查看日志文件：如果遇到问题，查看 ComfyUI 的日志文件以获取错误信息。
通过上述步骤，你可以成功安装并使用 ComfyUI 和 Flux.1 模型生成高质量的图像。如果你遇到任何问题，可以查看官方文档或社区论坛获取帮助。

## 总结

comfyUI、Flux.1的安装过程中会出现很多奇怪的问题，大多是因为网络问题，所以建议大家在安装的时候，最好能科学上网，不然会出现很多问题。
还有就是python的版本问题，这个时候要在终端引用comfyUI的python环境，不然会出现很多问题。





ComfyUI 是一个基于 Stable Diffusion 的图形用户界面，它允许用户通过拖放节点来创建图像生成工作流.

ComfyUI 和 Flux.1 安装与使用教程


![flux](https://suiyan.cc/assets/images/2024/flux.png)

在当今的数字艺术领域，Flux.1 和 ComfyUI 已经成为了两个不可忽视的关键词。Flux.1 是由 Black Forest Labs 开发的一款先进的图像生成模型，以其出色的文本到图像的转换能力和高质量的图像输出而闻名。ComfyUI 则是一个基于节点的图形用户界面，专为 Stable Diffusion 设计，提供了高度的可定制性和模块化的工作流程。在本文及后续的文章中，我们将深入探讨 Flux.1 和 ComfyUI 的核心概念和功能，帮助您更好地理解这两个工具的强大之处。

## flux.1 是什么？

Flux.1 模型以其120亿的训练参数和在图像质量、提示词准确性、尺寸适应性及输出多样性方面的优势，确立了图像合成技术的新高度。它分为三个版本：Pro、Dev 和 Schnell，每个版本都有其特定的应用场景和许可要求。Pro 版本提供最顶级的性能，适合企业定制化服务；Dev 版本开源但不可商用，适合研究和开发；Schnell 版本开源且可商用，适合个人和本地部署使用。

## flux.1的硬件要求

确保您的计算机具备足够的显存，最低要求为 8-12GB，推荐 16-24GB。这是因为 Flux.1 模型在图像质量和细节方面表现出色，但同时也需要较高的计算资源。

## flux.1的软件环境

安装 Python 和 Git，这些是运行 ComfyUI 的基础。您还需要安装 Visual Studio（不是必须） 和 CUDA，以支持 GPU 加速。
另外，网络环境需要魔法，因为comfyUI的更新需要访问到一些国外的资源。

## flux.1的模型

1. FLUX.1 Pro：这是最高端的模型，专为专业和企业用户设计，提供顶尖的图像质量和细节表现。它具备先进的提示词跟随能力，确保输出的多样性，适合要求严格的视觉项目。这个版本是闭源的，需要通过官方 API 申请访问权限。

2. FLUX.1 Dev：这是一个开源模型，适合非商业用途，如研究和开发。它直接从 FLUX.1 Pro 蒸馏而来，具备相似的图像质量和提示词遵循能力，但更加高效。

3. FLUX.1 Schnell：这是为本地开发和个人项目优化的开源模型，特点是速度快，内存占用小，适合快速实验和个人创作。它遵循 Apache 2.0 许可证，可以商用。

具体使用哪个版本可以根据硬件、个人需求和使用场景来选择。可以参考官方文档了解更多信息。

[Flux.1 不同版本模型](https://comfyui-wiki.com/zh-CN/tutorial/advanced/flux1-comfyui-guide-workflow-and-examples)

上边的文档里包括模型，vae clip的下载地址

国内用户如果不方便下载，可以到 [哩布哩布](https://www.liblib.art/)进行搜索下载。

## 总结

如果您对 Flux.1 和 ComfyUI 有任何疑问或需要进一步的帮助，请随时在评论区留言。欢迎交流。



在当今的数字艺术领域，Flux.1 和 ComfyUI 已经成为了两个不可忽视的关键词。Flux.1 是由 Black Forest Labs 开发的一款先进的图像生成模型，以其出色的文本到图像的转换能力和高质量的图像输出而闻名。ComfyUI 则是一个基于节点的图形用户界面，专为 Stable D...