1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<script setup lang="ts">
import text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils";
import {
ElMessage, genFileId,
type UploadInstance,
type UploadProps,
type UploadRawFile
} from "element-plus";
import { nextTick, onMounted, reactive, ref } from "vue";
const debug = ref(import.meta.env.MODE === 'production' ? false : true);
// const debug = ref(false);
const loading = ref(false);
const form = reactive({
task_id: "",
task_content: "开发一款坦克大战的小游戏",
prompt: `你是一名高级的程序员。现在需要根据产品需求，设计一份完整的程序编写的思路，比如第一步写什么模块，第二步写什么模块，整个思路应逻辑清晰、流畅。以json格式输出：\n[{"序号": 序号, "描述": 描述, "详细说明": 详细说明}, ...]\n`,
answer: "",
answer_json: [],
});
const llms = {
tyqw_online: {'api': 'tyqw', 'name':'线上通义千问'},
baichuan: {'api': 'langchain', 'name':'本地baichuan2-7b'},
qwen_local: {'api': 'langchain', 'name':'本地Qwen-7B-Chat'},
chatgpt: {'api': 'gpt', 'name':'chatgpt'},
kimi: {'api': 'kimi', 'name':'kimi'},
};
onMounted(() => {
// 初始化task_id
form.task_id = utils.genDateTimeStr();
console.log('页面加载，task_id=', form.task_id)
});
const onSubmitGpt = () => {
const my_prompt = ref(`${form.prompt}。产品需求如下：${form.task_content}`);
text2videoService
.submitLLM(utils.aesEncrypt(my_prompt.value), utils.aesEncrypt(llms.tyqw_online.api), [], form.task_id, "true")
.then((result: string) => {
console.log(result);
form.answer = result;
const jsonText = utils.extractJSON(result);
console.log(jsonText);
form.answer_json = utils.formatJsonObj(jsonText!);
})
.catch((error: any) => {
console.error(error);
ElMessage({
message: error,
type: "error",
});
});
};
</script>
<!-- ============================================================================================================ -->
<!-- ============================================================================================================ -->
<!-- ============================================================================================================ -->
<template>
<main class="home-container">
<!-- 标题 -->
<el-divider content-position="left">将产品需求拆解为开发步骤</el-divider>
<el-form :model="form" label-width="114px" v-loading="loading">
<!-- 产品需求 -->
<el-form-item label="产品需求">
<el-input v-model="form.task_content" :autosize="true" type="textarea" />
</el-form-item>
<!-- Prompt -->
<el-form-item label="Prompt">
<el-text class="mx-1" type="danger">{{ form.prompt }}</el-text>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmitGpt"
>生成步骤（{{ llms.tyqw_online.name }}）</el-button
>
</el-form-item>
<!-- 结果 -->
<el-form-item label="步骤">
<!-- <el-text class="mx-1">{{ form.answer }}</el-text> -->
<el-table
:data="form.answer_json"
border
style="width: 100%; z-index: calc(var(--el-table-index) -1)"
>
<el-table-column prop="序号" label="序号" width="55" />
<el-table-column prop="描述" label="描述" width="300">
<template v-slot="scope">
<el-text class="mx-1">{{ scope.row.描述 }}</el-text>
</template>
</el-table-column>
<el-table-column prop="详细说明" label="详细说明">
<template v-slot="scope">
<el-text class="mx-1">{{ scope.row.详细说明 }}</el-text>
</template>
</el-table-column>
<el-table-column width="200" label="操作" align="center">
<template v-slot="scope">
<div style="margin: 5px 0">
<el-button type="primary" size="small" @click=""
>与大模型继续沟通</el-button
>
</div>
<!-- <div style="margin: 10px 0">
<el-button type="danger" size="small" @click="">删除本步骤</el-button>
</div> -->
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="">保存所有记录</el-button>
</el-form-item> -->
</el-form>
</main>
</template>
<style lang="scss" scoped>
.home-container {
width: 100%;
}
</style>
<style lang="scss">
.home-container {
.el-table .el-table__cell {
z-index: calc(var(--el-table-index) -1);
}
}
.dashed-div {
border: 1px dashed #999;
margin: 5px 0;
padding: 2px;
}
</style>