合并了文案和导出psd格式的代码，为后续工作做准备
This commit is contained in:
Wang Xiuqiang
parent
183942d2bb
commit
5eec48a889
@ -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
45
outputs/generated_code.vue
Normal 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
11
requirements.txt
Normal file
@ -0,0 +1,11 @@
|
||||
# 基础依赖
|
||||
python-dotenv # 用于加载.env文件中的环境变量
|
||||
pyyaml # 用于解析YAML配置文件
|
||||
|
||||
# API客户端
|
||||
openai == 1.82.1 # 用于调用OpenAI/Moonshot/DeepSeek API
|
||||
|
||||
# 图像处理
|
||||
Pillow # PIL库，用于基础图像处理
|
||||
psd-tools # 用于PSD文件的创建和操作
|
||||
|
||||
@ -2,8 +2,6 @@ import os
|
||||
from openai import OpenAI
|
||||
from dotenv import load_dotenv
|
||||
import time
|
||||
import logging
|
||||
|
||||
|
||||
# === Config LLM call ===
|
||||
load_dotenv()
|
||||
@ -12,12 +10,6 @@ deepseek_api = os.getenv("DEEPSEEK_API_KEY")
|
||||
if not deepseek_api:
|
||||
raise ValueError("DEEPSEEK_API_KEY not set!")
|
||||
|
||||
# 配置日志
|
||||
logging.basicConfig(level=logging.INFO)
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
# === prompts and parameters ===
|
||||
def call_deepseek(
|
||||
messages=None,
|
||||
system_prompt="你是一个擅长前端开发的AI，专注于生成Vue.js代码。",
|
||||
@ -99,37 +91,33 @@ def call_deepseek(
|
||||
return content, response.usage
|
||||
|
||||
except Exception as e:
|
||||
if hasattr(e, 'status_code') and e.status_code == 429: # 限流
|
||||
logger.warning(f"请求过于频繁，正在重试... (尝试 {attempt + 1}/{max_retries})")
|
||||
if hasattr-------------('status_code') and e.status_code == 429: # 限流
|
||||
print(f"请求过于频繁，正在重试... (尝试 {attempt + 1}/{max_retries})")
|
||||
time.sleep(2 ** attempt) # 指数退避
|
||||
else:
|
||||
logger.error(f"API 调用失败：{str(e)}")
|
||||
raise
|
||||
raise Exception("达到最大重试次数，API 调用失败")
|
||||
|
||||
def generate_vue_code(prompt=None):
|
||||
prompt = (
|
||||
"生成一个React组件代码，用于端午节活动海报，包含以下部分并指定排版位置："
|
||||
"生成一个Vue组件代码，用于端午节活动海报，包含以下部分并指定排版位置："
|
||||
"1. 背景图层：div，占据整个组件区域。"
|
||||
"2. 主体图层：div，位于顶部1/4处，居中，包含标题和副标题。"
|
||||
"3. 活动亮点：div，位于底部1/4处，居中，使用网格布局展示三项活动（每项包含图标、标题和描述）。"
|
||||
"4. 页脚：div，位于底部，居中，包含主办单位信息和logo图片。"
|
||||
"组件尺寸为1080x1920px，布局使用absolute定位，仅关注排版位置，不包含任何样式描述（如颜色、字体、阴影、动画等）。"
|
||||
"仅生成React代码本身，不包含说明性文字、注释或Markdown格式。"
|
||||
"仅生成Vue代码本身，不包含说明性文字、注释或Markdown格式。"
|
||||
)
|
||||
system_prompt = (
|
||||
"你是一个擅长前端开发的AI，专注于生成React.js代码。"
|
||||
"你是一个擅长前端开发的AI，专注于生成Vue.js代码。"
|
||||
"生成的代码仅关注排版位置，使用absolute定位，不包含任何样式描述（如颜色、字体、阴影、动画等）。"
|
||||
"确保代码符合React最佳实践，仅生成代码本身。"
|
||||
"确保代码符合Vue最佳实践，仅生成代码本身。"
|
||||
)
|
||||
|
||||
|
||||
result, usage = call_deepseek(prompt=prompt, system_prompt=system_prompt, temperature=0.4)
|
||||
# print(result)
|
||||
# print(usage)
|
||||
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)
|
||||
with open(file_path, "w", encoding="utf-8") as f:
|
||||
f.write(code)
|
||||
@ -137,4 +125,4 @@ def save_code(code,file_path="../outputs/generated_code.jsx"):
|
||||
if __name__ == "__main__":
|
||||
vue_code = generate_vue_code()
|
||||
save_code(vue_code)
|
||||
print("React组件代码已生成并保存到outputs/generated_code.jsx")
|
||||
print("Vue组件代码已生成并保存到outputs/generated_code.vue")
|
||||
Loading…
Reference in New Issue
Block a user