AI 生成: 一个使用 Flask 构建的 AI 随机生成应用，可随机生成名字、故事、颜色、名言和密码，并支持一键复制。
This commit is contained in:
admin
@@ -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
|
||||
@@ -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)
|
||||
@@ -0,0 +1 @@
|
||||
Flask==3.0.0
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user