Wordpress AI Image主题-支持文生图、图生图等功能

![wechat_2025-09-10_175555_053](https://www1.foxlet.cn/wp-content/uploads/sites/3/2025/09/wechat_2025-09-10_175555_053.png)
![wechat_2025-09-10_165801_402](https://www1.foxlet.cn/wp-content/uploads/sites/3/2025/09/wechat_2025-09-10_165801_402.png)
### 支持免费使用，不能更改API地址，wp-AI图片生成主题链接：https://www.123684.com/s/oqvZVv-wIjov?pwd=rywh 提取码：rywh
### 购买授权版可以自定义API地址购买授权版可以自定义API地址
# AI Image WordPress 主题

一个基于 OpenAI接口的流式图片生成功能的 WordPress 主题，提供对话交互界面、完善的会话与模型管理、图片生成与下载、公告系统与后台运营配置。

## 🌟 功能概览

### 前台功能
– **AI 流式对话**：基于 EventSource 的流式返回与打字效果，体验顺滑
– **现代风格 UI**：双栏布局（左侧会话、右侧对话），信息密度友好
– **模型与参数选择**：支持模型、尺寸/比例、数量等参数切换（桌面端内嵌、移动端折叠）
– **图片上传与内联预览**：支持多图上传、缩略图列表与删除操作
– **图片查看与下载**：支持图片悬浮按钮、下载、灯箱预览
– **消息增强**：用户消息复制、错误提示样式、加载中动效
– **公告系统（弹窗）**：多模板、支持富文本（列表/代码/表格/引用/徽章等），移动端优化
– **响应式设计**：完善的移动端/平板/桌面适配

### 后台管理
– **仪表盘（`admin/dashboard.php`）**：系统概览与快捷入口
– **模型管理（`admin/model-management.php`）**：模型列表、搜索、分页、增删改、启用/停用/默认、尺寸与比例配置
– **系统设置（`admin/system-settings.php`）**：全局限制、维护工具，未授权提醒与联系人快捷入口（现已在底部常显联系方式）
– **用户权限（`admin/permissions-settings.php`）**：功能权限与角色管理
– **会话管理（`admin/sessions.php`）**：查看/删除/批量操作/导出
– **公告管理（`admin/announcements.php`）**：新增/编辑/模板选择/发布，前台弹窗展示
– **授权设置（`admin/auth-settings.php`）**：授权验证，且“授权联系方式”始终展示（支持一键复制与 QQ 快捷联系）

## 🎨 界面风格与交互
– **设计语言**：明亮主题 + 渐变（`bg-gradient-to-r`, `bg-gradient-to-br`）+ 柔和阴影（`shadow-*`）+ 大圆角（`rounded-xl/2xl`）
– **组件风格**：
– 按钮：渐变主色、悬浮放大与阴影、禁用态降饱和
– 输入区域：圆角卡片、聚焦描边、内嵌参数选择器（桌面端）
– 图片卡片：圆角+阴影，悬浮显示操作按钮（下载/全屏）
– **动画动效**：气泡/粒子细微浮动（`animate-bounce` / 自定义 keyframes），输入/按钮过渡
– **响应式细节**：移动端压缩间距、按钮重排、文本尺寸与栅格列数自适应

## 📢 公告系统（弹窗）
– **展示位置**：前台右上角铃铛按钮/自动弹出（`#announcementModal`）
– **时间显示**：采用精确时间格式 `YYYY-MM-DD HH:mm:ss`（不再显示“几天前”）
– **内容增强**：
– 列表：有序/无序支持，带样式的层级缩进与标记
– 代码：`` 与 `


` 高可读底色、等宽字体
  - 表格：圆角卡片、悬浮行高亮
  - 引用：左侧高亮边线，浅底色
  - 徽章：默认/成功/警告/错误多状态
- **移动端优化**：更紧凑的上下间距/字号，弹窗最大高宽自适应
- **后台管理**：在 “公告管理” 中维护，支持多模板（默认/信息/成功/警告/错误/渐变/现代）


## 🛠️ 技术架构
- **样式框架**：Tailwind CSS（引入版本 `2.2.19`）
- **额外样式**：`assets/css/responsive.css`（补充组件与响应式细节）
- **安全处理**：DOMPurify（`assets/vendor/dompurify-3.0.8.min.js`）对公告与富文本进行安全过滤
- **前端脚本**：`assets/js/frontend.js`（对话流程、UI 交互、公告弹窗、图片行为）
- **后台脚本**：`assets/js/admin.js`（表格渲染、AJAX、状态反馈）
- **数据传输**：WordPress 原生 AJAX + EventSource 流式输出
- **后端环境**：WordPress（PHP 7.4+）、MySQL

## 📦 安装与启用
1. 将主题文件夹上传至 `wp-content/themes/ai-image-generator/`
2. 后台 “外观 → 主题” 启用主题
3. 进入 “前台 → 设置” 获取配置 API 地址与密钥
4. 进入 “模型管理/系统设置/用户权限/公告管理/授权设置”等页面完成运营配置

## ⚙️ 基本配置项
### API 设置
| 配置项 | 说明 | 默认值 |
|--------|------|--------|
| API 地址 | API 完整请求地址 | `https://s.lconai.com/v1/chat/completions` |
| API 密钥 | 您的 API 密钥 | 无 |

### 模型/参数
| 参数 | 说明 | 可选值 |
|------|------|--------|
| 聊天模型 | 用于图片生成的模型 | 例如：Midjourney、gemini-2.5-flash-image、flux-kontext-pro、flux-kontext-max等 |
| 图片尺寸 | 传递给 AI 的图片参数 | `1:1`, `3:4`, `4:3`等|
| 生成数量 | 一次生成图片数量 | 1-4 |


## 🧭 使用指南
### 前台
1) 新建会话：点击侧边栏 “新对话”
2) 生成图片：输入描述 → 点击发送/回车
3) 操作图片：悬浮按钮可全屏/下载；点击进入灯箱
4) 公告查看：点击铃铛或自动弹出；支持图文、列表、代码等

## 🧩 自定义与扩展
- **样式约定**：优先使用 Tailwind 原生类；必要时在 `assets/css/responsive.css` 中通过 `@layer components` 组织组件样式
- **常用组件类**：
  - 图片：`.ai-generated-image`（已内置 `max-w-full h-auto rounded-lg my-2.5`）
  - 图片操作层：`.ai-image-overlay`、下载按钮 `.ai-download-btn`
  - 公告内容容器：`.announcement-content`（已内置列表/代码/表格/引用/徽章等样式）
- **公告可用 HTML 片段示例**：
```html
系统更新
本次更新包含以下内容：

  公告时间显示为精确格式
  移动端公告间距与字号优化

温馨提示：如需技术支持，请联系右上角客服。
console.log('Hello AI Image Generator');
已上线

```
## 🐛 故障排除

- API 连接失败：检查密钥/网络/额度

- 图片生成失败：检查提示词是否合规、模型与参数设置是否正确

- 会话异常：确保用户登录、数据库表存在、清理缓存
## 🔒 安全与性能

- 安全：开启 DOMPurify 过滤富文本；谨慎使用内联 HTML

- 权限：合理配置“用户权限”，隔离敏感操作

- 备份：建议定期备份会话与消息数据

- 性能：建议配合对象缓存/CDN；定期清理历史数据
## 🤝 支持与授权

- 授权设置：后台 “AI 图片生成器 → 授权设置”

- 客服 QQ：`1196192935`（工作日 9:00-18:00）

- QQ 快捷联系：`tencent://message/?uin=1196192935&Site=Sambow&Menu=yes`
> 本主题遵循 WordPress 开发规范与 Tailwind 原生用法，前后台样式尽量使用实用类实现，减少自定义 CSS 体积，并在移动端提供更友好的交互体验。

WordPress AI Image主题

系统更新

相关产品

智狐AI客服 WordPress AI客服插件

AI导读 Wordpress插件

WordPress公众号订阅管理插件

搜索