# kira-chat

**Repository Path**: weigo6/kira-chat

## Basic Information

- **Project Name**: kira-chat
- **Description**: 一个集成硅基流动的AI聊天系统（修改自Github同名开源项目）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-14
- **Last Updated**: 2025-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# KiraChat - 打造属于你的专属 AI 猫娘，开启沉浸式二次元对话喵~

KiraChat 是一个二次元风格支持自定义 Prompt 的 AI 对话应用，使用原生 HTML、CSS 和 JavaScript 构建，并通过 Vue 3 CDN 简化开发。应用程序提供了流畅的用户体验和美观的界面设计,并可以在设置中自定义 prompt 来定义 LLM 行为。

## 主要功能

- **二次元风格设计**：粉色与紫色为主的可爱界面，动画效果和圆润的设计元素
- **硅基流动 API 支持**：支持连接到硅基流动 API，使用真实的大语言模型
- **流式传输打字机效果**：AI 回复逐字显示，模拟真实打字体验
- **虚拟列表**：高效显示大量聊天消息，减少内存占用
- **侧边栏历史记录**：方便访问过去的对话
- **响应式设计**：完美兼容 PC、平板和手机设备
- **主题切换**：支持明亮模式和暗黑模式
- **本地存储**：自动保存对话历史到浏览器
- **停止 AI 回复**：可以随时停止 AI 的打字过程
- **自动滚动**：聊天内容自动滚动到最新消息

## 技术特点

- **原生技术栈**：使用 HTML、CSS 和 JavaScript
- **Vue 3**：通过 CDN 引入 Vue 3，实现响应式界面
- **无构建工具**：无需 Webpack 或 Vite 等构建工具
- **本地数据存储**：使用 localStorage 存储聊天历史
- **硅基流动 API 集成**：支持连接到硅基流动 API，使用真实 AI 模型
- **模拟模式**：无 API 密钥时使用模拟数据

## 如何使用

1. 直接打开`index.html`文件
2. 点击"API 设置"按钮配置硅基流动 API 密钥（可选）
3. 点击"新对话"创建新的对话
4. 在输入框中输入消息，按 Enter 发送
5. 如需停止 AI 回复，点击停止按钮
6. 可通过侧边栏切换历史对话
7. 点击右下角的主题按钮切换暗黑/明亮模式

## 配置硅基流动 API

1. 登录[SiliconCloud](https://cloud.siliconflow.cn/i/hnFF8lih)获取 API 密钥
2. 在应用中点击"API 设置"按钮
3. 输入 API 密钥，选择模型和参数
4. 点击"保存"按钮完成配置

## 自定义

- 修改`css/style.css`中的颜色变量来改变主题颜色
- 在`js/main.js`中调整 API 参数和系统提示词
- 可调整动画效果和打字速度以适应不同需求

## 未来计划

- ~~添加推理模型的思考显示~~ ✓
- ~~添加更多个性化设置选项~~ ✓
- 添加语音输入支持
- 实现消息图片和附件支持
- 增强 Markdown 和代码块渲染
- 支持更多 AI 模型提供商

---

## 项目结构

```
KiraChat/
├── css/
│   └── style.css       # 样式文件
├── js/
│   └── main.js         # JavaScript逻辑
├── images/
│   └── ass.jpg         # 头像图片
├── index.html          # 主HTML文件
└── README.md           # 项目说明
```

## 开源许可

MIT License