affordan/ai_service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并了文案和导出psd格式的代码，为后续工作做准备

Browse Source
This commit is contained in:
Wang Xiuqiang 2025-06-03 20:44:12 +08:00
parent 183942d2bb
commit 5eec48a889
4 changed files with 65 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
outputs/generated_code.jsx
View File

@ -1,47 +0,0 @@
```jsx
import React from 'react';
const DragonBoatFestivalPoster = () => {
return (
<div style={{ position: 'relative', width: '1080px', height: '1920px' }}>
{/* 背景图层 */}
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}></div>
{/* 主体图层 */}
<div style={{ position: 'absolute', top: '25%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center' }}>
<h1></h1>
<h2></h2>
</div>
{/* 活动亮点 */}
<div style={{ position: 'absolute', bottom: '25%', left: '50%', transform: 'translateX(-50%)', width: '80%' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
<div style={{ textAlign: 'center' }}>
<div></div>
<h3></h3>
<p></p>
</div>
<div style={{ textAlign: 'center' }}>
<div></div>
<h3></h3>
<p></p>
</div>
<div style={{ textAlign: 'center' }}>
<div></div>
<h3></h3>
<p></p>
</div>
</div>
</div>
{/* 页脚 */}
<div style={{ position: 'absolute', bottom: '5%', left: '50%', transform: 'translateX(-50%)', textAlign: 'center' }}>
<p></p>
<div></div>
</div>
</div>
);
};
export default DragonBoatFestivalPoster;
```

45
outputs/generated_code.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div style="position: relative; width: 1080px; height: 1920px;">
<!-- 背景图层 -->
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<!-- 主体图层 -->
<div style="position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
<h1></h1>
<h2></h2>
</div>
<!-- 活动亮点 -->
<div style="position: absolute; bottom: 25%; left: 50%; transform: translate(-50%, 0); width: 80%;">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
<div>
<div></div>
<h3></h3>
<p></p>
</div>
<div>
<div></div>
<h3></h3>
<p></p>
</div>
<div>
<div></div>
<h3></h3>
<p></p>
</div>
</div>
</div>
<!-- 页脚 -->
<div style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; padding-bottom: 20px;">
<p></p>
<img style="display: inline-block;" />
</div>
</div>
</template>
<script>
export default {
name: 'DragonBoatFestivalPoster'
}
</script>

11
requirements.txt Normal file
View File

@ -0,0 +1,11 @@
# 基础依赖
python-dotenv # 用于加载.env文件中的环境变量
pyyaml # 用于解析YAML配置文件
# API客户端
openai == 1.82.1 # 用于调用OpenAI/Moonshot/DeepSeek API
# 图像处理
Pillow # PIL库，用于基础图像处理
psd-tools # 用于PSD文件的创建和操作

30
scripts/generate_layout.py
View File

@ -2,8 +2,6 @@ import os
from openai import OpenAI from openai import OpenAI
from dotenv import load_dotenv from dotenv import load_dotenv
import time import time
import logging
# === Config LLM call === # === Config LLM call ===
load_dotenv() load_dotenv()
@ -12,12 +10,6 @@ deepseek_api = os.getenv("DEEPSEEK_API_KEY")
if not deepseek_api: if not deepseek_api:
raise ValueError("DEEPSEEK_API_KEY not set!") raise ValueError("DEEPSEEK_API_KEY not set!")
# 配置日志
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# === prompts and parameters ===
def call_deepseek( def call_deepseek(
messages=None, messages=None,
system_prompt="你是一个擅长前端开发的AI，专注于生成Vue.js代码。", system_prompt="你是一个擅长前端开发的AI，专注于生成Vue.js代码。",
@ -99,37 +91,33 @@ def call_deepseek(
return content, response.usage return content, response.usage
except Exception as e: except Exception as e:
if hasattr(e, 'status_code') and e.status_code == 429: # 限流 if hasattr-------------('status_code') and e.status_code == 429: # 限流
logger.warning(f"请求过于频繁，正在重试... (尝试 {attempt + 1}/{max_retries})") print(f"请求过于频繁，正在重试... (尝试 {attempt + 1}/{max_retries})")
time.sleep(2 ** attempt) # 指数退避 time.sleep(2 ** attempt) # 指数退避
else: else:
logger.error(f"API 调用失败：{str(e)}")
raise raise
raise Exception("达到最大重试次数，API 调用失败") raise Exception("达到最大重试次数，API 调用失败")
def generate_vue_code(prompt=None): def generate_vue_code(prompt=None):
prompt = ( prompt = (
"生成一个React组件代码，用于端午节活动海报，包含以下部分并指定排版位置：" "生成一个Vue组件代码，用于端午节活动海报，包含以下部分并指定排版位置："
"1. 背景图层：div，占据整个组件区域。" "1. 背景图层：div，占据整个组件区域。"
"2. 主体图层：div，位于顶部1/4处，居中，包含标题和副标题。" "2. 主体图层：div，位于顶部1/4处，居中，包含标题和副标题。"
"3. 活动亮点：div，位于底部1/4处，居中，使用网格布局展示三项活动（每项包含图标、标题和描述）。" "3. 活动亮点：div，位于底部1/4处，居中，使用网格布局展示三项活动（每项包含图标、标题和描述）。"
"4. 页脚：div，位于底部，居中，包含主办单位信息和logo图片。" "4. 页脚：div，位于底部，居中，包含主办单位信息和logo图片。"
"组件尺寸为1080x1920px，布局使用absolute定位，仅关注排版位置，不包含任何样式描述（如颜色、字体、阴影、动画等）。" "组件尺寸为1080x1920px，布局使用absolute定位，仅关注排版位置，不包含任何样式描述（如颜色、字体、阴影、动画等）。"
"仅生成React代码本身，不包含说明性文字、注释或Markdown格式。" "仅生成Vue代码本身，不包含说明性文字、注释或Markdown格式。"
) )
system_prompt = ( system_prompt = (
"你是一个擅长前端开发的AI，专注于生成React.js代码。" "你是一个擅长前端开发的AI，专注于生成Vue.js代码。"
"生成的代码仅关注排版位置，使用absolute定位，不包含任何样式描述（如颜色、字体、阴影、动画等）。" "生成的代码仅关注排版位置，使用absolute定位，不包含任何样式描述（如颜色、字体、阴影、动画等）。"
"确保代码符合React最佳实践，仅生成代码本身。" "确保代码符合Vue最佳实践，仅生成代码本身。"
) )
result, usage = call_deepseek(prompt=prompt, system_prompt=system_prompt, temperature=0.4)
result,usage = call_deepseek(prompt=prompt, system_prompt=system_prompt,temperature=0.4)
# print(result)
# print(usage)
return result return result
def save_code(code,file_path="../outputs/generated_code.jsx"): def save_code(code, file_path="../outputs/generated_code.vue"):
os.makedirs(os.path.dirname(file_path), exist_ok=True) os.makedirs(os.path.dirname(file_path), exist_ok=True)
with open(file_path, "w", encoding="utf-8") as f: with open(file_path, "w", encoding="utf-8") as f:
f.write(code) f.write(code)
@ -137,4 +125,4 @@ def save_code(code,file_path="../outputs/generated_code.jsx"):
if __name__ == "__main__": if __name__ == "__main__":
vue_code = generate_vue_code() vue_code = generate_vue_code()
save_code(vue_code) save_code(vue_code)
print("React组件代码已生成并保存到outputs/generated_code.jsx") print("Vue组件代码已生成并保存到outputs/generated_code.vue")