From f874c5720878daf191a430f557a2f665e0efe7bf Mon Sep 17 00:00:00 2001 From: admin Date: Mon, 28 Sep 2026 22:05:42 +0800 Subject: [PATCH] =?UTF-8?q?AI=20=E7=94=9F=E6=88=90:=20=E4=B8=80=E4=B8=AA?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Flask=20=E6=9E=84=E5=BB=BA=E7=9A=84=20AI?= =?UTF-8?q?=20=E9=9A=8F=E6=9C=BA=E7=94=9F=E6=88=90=E5=BA=94=E7=94=A8?= =?UTF-8?q?=EF=BC=8C=E5=8F=AF=E9=9A=8F=E6=9C=BA=E7=94=9F=E6=88=90=E5=90=8D?= =?UTF-8?q?=E5=AD=97=E3=80=81=E6=95=85=E4=BA=8B=E3=80=81=E9=A2=9C=E8=89=B2?= =?UTF-8?q?=E3=80=81=E5=90=8D=E8=A8=80=E5=92=8C=E5=AF=86=E7=A0=81=EF=BC=8C?= =?UTF-8?q?=E5=B9=B6=E6=94=AF=E6=8C=81=E4=B8=80=E9=94=AE=E5=A4=8D=E5=88=B6?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 52 +++++++++++++++++++++++++ app.py | 87 +++++++++++++++++++++++++++++++++++++++++ requirements.txt | 1 + static/css/style.css | 92 ++++++++++++++++++++++++++++++++++++++++++++ static/js/main.js | 55 ++++++++++++++++++++++++++ templates/index.html | 30 +++++++++++++++ 6 files changed, 317 insertions(+) create mode 100644 README.md create mode 100644 app.py create mode 100644 requirements.txt create mode 100644 static/css/style.css create mode 100644 static/js/main.js create mode 100644 templates/index.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..e6effa1 --- /dev/null +++ b/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 diff --git a/app.py b/app.py new file mode 100644 index 0000000..68810b5 --- /dev/null +++ b/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/") +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) diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..047e950 --- /dev/null +++ b/requirements.txt @@ -0,0 +1 @@ +Flask==3.0.0 diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..1ecd8a5 --- /dev/null +++ b/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; +} diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..0218bd6 --- /dev/null +++ b/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); + } +}); diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..4468df0 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,30 @@ + + + + + + AI 随机生成器 + + + +
+

AI 随机生成器

+

点击按钮,随机生成有趣的内容

+ +
+ + + + + +
+ +
+
点击上方按钮开始生成
+ +
+
+ + + +