AI 生成: 一个使用 Flask 构建的 AI 随机生成应用，可随机生成名字、故事、颜色、名言和密码，并支持一键复制。

README.md

@@ -0,0 +1,52 @@
+# AI Random App
+
+一个基于 Python Flask 的 AI 随机生成应用。用户可以随机生成名字、故事、颜色、名言和密码。
+
+## 功能
+
+- 随机名字生成
+- 随机故事生成
+- 随机颜色生成
+- 随机名言生成
+- 随机密码生成
+- 一键复制结果
+
+## 目录结构
+
+```
+ai-random-app/
+├── app.py
+├── requirements.txt
+├── README.md
+├── static/
+│   ├── css/style.css
+│   └── js/main.js
+└── templates/
+    └── index.html
+```
+
+## 运行方式
+
+1. 安装依赖：
+
+```bash
+pip install -r requirements.txt
+```
+
+2. 启动应用：
+
+```bash
+python app.py
+```
+
+3. 浏览器访问：
+
+```
+http://127.0.0.1:5000
+```
+
+## 技术栈
+
+- Python 3
+- Flask
+- HTML / CSS / JavaScript

app.py

@@ -0,0 +1,87 @@
+import random
+from flask import Flask, jsonify, render_template
+
+app = Flask(__name__)
+
+# 数据源：用于随机生成的素材库
+NAMES = [
+    "星野", "云舟", "夜阑", "墨白", "子衿", "清和", "若曦", "南风",
+    "朝歌", "暮雪", "青岚", "白露", "寒山", "流萤", "听澜", "望舒"
+]
+
+STORIES = [
+    "在一个被星光笼罩的夜晚，{name}发现了一扇通往未知世界的门。",
+    "{name}在旧书店的角落里找到了一本会说话的日记，从此命运改变。",
+    "传说中，{name}拥有一颗能听见风之低语的心，于是踏上了寻找故乡的旅程。",
+    "当城市沉入梦境，{name}却在屋顶上遇见了来自百年前的旅人。",
+    "{name}在海边捡到一枚发光的贝壳，里面藏着一整个消失的王国。"
+]
+
+COLORS = [
+    "#FF6B6B", "#4ECDC4", "#FFE66D", "#1A535C", "#FF9F1C",
+    "#2EC4B6", "#E71D36", "#7768AE", "#F4A261", "#264653"
+]
+
+QUOTES = [
+    "生活不是等待暴风雨过去，而是学会在雨中跳舞。",
+    "你今天的努力，是幸运的伏笔。",
+    "所有的光芒，都需要时间才能被看到。",
+    "心之所向，素履以往；生如逆旅，一苇以航。",
+    "不要害怕走得慢，只要方向是对的。",
+    "世界很大，请带着梦想一起奔跑。"
+]
+
+
+def generate_name():
+    """随机生成一个名字"""
+    return random.choice(NAMES) + "·" + random.choice(NAMES)
+
+
+def generate_story():
+    """随机生成一个故事"""
+    name = random.choice(NAMES)
+    return random.choice(STORIES).format(name=name)
+
+
+def generate_color():
+    """随机生成一个颜色"""
+    return random.choice(COLORS)
+
+
+def generate_quote():
+    """随机生成一句名言"""
+    return random.choice(QUOTES)
+
+
+def generate_password(length=16):
+    """随机生成一个密码"""
+    chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*"
+    return "".join(random.choice(chars) for _ in range(length))
+
+
+@app.route("/")
+def index():
+    """首页"""
+    return render_template("index.html")
+
+
+@app.route("/api/generate/<kind>")
+def generate(kind):
+    """根据类型返回随机生成结果"""
+    generators = {
+        "name": generate_name,
+        "story": generate_story,
+        "color": generate_color,
+        "quote": generate_quote,
+        "password": generate_password
+    }
+
+    if kind not in generators:
+        return jsonify({"error": "未知的生成类型"}), 400
+
+    result = generators[kind]()
+    return jsonify({"type": kind, "result": result})
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1 @@
+Flask==3.0.0

static/css/style.css

@@ -0,0 +1,92 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1e3c72, #2a5298);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.container {
+  width: 100%;
+  max-width: 720px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 40px 30px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+  text-align: center;
+}
+
+h1 {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.subtitle {
+  color: #d0d8ff;
+  margin-bottom: 30px;
+}
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background: #4ecdc4;
+  color: #1a1a1a;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.15s ease, background 0.2s ease;
+}
+
+button:hover {
+  background: #38b2a8;
+  transform: translateY(-2px);
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+.result-box {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.result {
+  font-size: 20px;
+  line-height: 1.6;
+  word-break: break-word;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  transition: color 0.3s ease;
+}
+
+.copy-btn {
+  background: #ff6b6b;
+  color: #fff;
+}
+
+.copy-btn:hover {
+  background: #e85a5a;
+}

static/js/main.js

@@ -0,0 +1,55 @@
+// 获取页面元素
+const resultEl = document.getElementById("result");
+const copyBtn = document.getElementById("copyBtn");
+const buttons = document.querySelectorAll(".buttons button");
+
+/**
+ * 调用后端 API 生成随机内容
+ * @param {string} kind - 生成类型
+ */
+async function generate(kind) {
+  resultEl.textContent = "生成中...";
+  resultEl.style.color = "#fff";
+
+  try {
+    const res = await fetch(`/api/generate/${kind}`);
+    const data = await res.json();
+
+    if (data.error) {
+      resultEl.textContent = data.error;
+      return;
+    }
+
+    // 如果是颜色类型，直接展示色块
+    if (kind === "color") {
+      resultEl.textContent = data.result;
+      resultEl.style.color = data.result;
+    } else {
+      resultEl.textContent = data.result;
+    }
+  } catch (err) {
+    resultEl.textContent = "生成失败，请稍后重试";
+    console.error(err);
+  }
+}
+
+// 为每个按钮绑定点击事件
+buttons.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    generate(btn.dataset.kind);
+  });
+});
+
+// 复制结果到剪贴板
+copyBtn.addEventListener("click", async () => {
+  const text = resultEl.textContent;
+  if (!text || text === "点击上方按钮开始生成") return;
+
+  try {
+    await navigator.clipboard.writeText(text);
+    copyBtn.textContent = "已复制 ✓";
+    setTimeout(() => (copyBtn.textContent = "复制结果"), 1500);
+  } catch (err) {
+    console.error("复制失败", err);
+  }
+});

templates/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI 随机生成器</title>
+  <link rel="stylesheet" href="static/css/style.css" />
+</head>
+<body>
+  <main class="container">
+    <h1>AI 随机生成器</h1>
+    <p class="subtitle">点击按钮，随机生成有趣的内容</p>
+
+    <div class="buttons">
+      <button data-kind="name">随机名字</button>
+      <button data-kind="story">随机故事</button>
+      <button data-kind="color">随机颜色</button>
+      <button data-kind="quote">随机名言</button>
+      <button data-kind="password">随机密码</button>
+    </div>
+
+    <section class="result-box">
+      <div id="result" class="result">点击上方按钮开始生成</div>
+      <button id="copyBtn" class="copy-btn">复制结果</button>
+    </section>
+  </main>
+
+  <script src="static/js/main.js"></script>
+</body>
+</html>