add imamges

package.json

@@ -16,6 +16,7 @@
     "axios": "^1.6.8",
     "element-plus": "^2.7.5",
     "pinia": "^2.1.7",
+    "uuid": "^10.0.0",
     "vant": "^4.9.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",

public/templates/template.json

 [
     {
         "id": "1",
-        "image": "template1.png",
-        "prompt": "A figure engulfed in light, with intense glow radiating fiercely behind."
+        "title":"Consensus",
+        "image": "template1.jpg",
+        "prompt": "large conference hall, podium with speaker, blockchain logos, tech booths, audience with notebooks, high-energy atmosphere"
     },
     {
         "id": "2",
-        "image": "template2.png",
-        "prompt": "A person standing amidst a storm, lightning crackling in the background."
+        "title":"ETHDenver",
+        "image": "template2.jpg",
+        "prompt": "tech conference venue, Ethereum logos, coding workshops, networking areas, blockchain enthusiasts, creative vibe"
     },
     {
         "id": "3",
-        "image": "template3.png",
-        "prompt": "A silhouette surrounded by swirling mist, ethereal light illuminating the scene behind."
+        "title":"Devcon",
+        "image": "template3.jpg",
+        "prompt": "international conference center, keynote speakers, blockchain presentations, developer discussions, Ethereum branding, collaborative environment"
     },
     {
         "id": "4",
-        "image": "template4.png",
-        "prompt": "A figure emerging from a dense forest, with beams of sunlight creating a radiant backdrop."
+        "title":"Y Combinator",
+        "image": "template4.jpg",
+        "prompt": "modern office space, startup founders, mentorship sessions, whiteboards with ideas, funding pitches, innovation-driven atmosphere"
+    },
+    {
+        "id": "5",
+        "title":"Techstars",
+        "image": "template5.jpg",
+        "prompt": "dynamic workspace, startup teams collaborating, mentor interactions, pitch decks, brainstorming sessions, entrepreneurial spirit"
+    },
+    {
+        "id": "6",
+        "title":"500 Startups",
+        "image": "template6.jpg",
+        "prompt": "vibrant office, diverse startup teams, accelerator programs, investor meetings, creative discussions, high-energy environment"
+    },
+    {
+        "id": "7",
+        "title":"WeWork",
+        "image": "template7.jpg",
+        "prompt": "stylish co-working space, shared desks, communal lounge, coffee bar, collaborative meetings, modern decor"
+    },
+    {
+        "id": "8",
+        "title":"Spaces",
+        "image": "template8.jpg",
+        "prompt": "contemporary office design, open work areas, comfortable seating, networking events, shared amenities, inspiring workspace"
+    },
+    {
+        "id": "9",
+        "title":"Impact Hub",
+        "image": "template9.jpg",
+        "prompt": "eco-friendly co-working space, social entrepreneurs, collaborative projects, networking lounge, sustainable design, innovative community"
+    },
+    {
+        "id": "10",
+        "title":"Google HQ",
+        "image": "template10.jpg",
+        "prompt": "futuristic campus, Google logo, modern workspaces, employee lounges, advanced tech labs, innovative culture"
+    },
+    {
+        "id": "11",
+        "title":"Facebook HQ",
+        "image": "template11.jpg",
+        "prompt": "high-tech office complex, Facebook logo, collaborative work areas, social spaces, cutting-edge technology, creative environment"
+    },
+    {
+        "id": "12",
+        "title":"Amazon HQ",
+        "image": "template12.jpg",
+        "prompt": "sprawling tech campus, Amazon logo, bustling offices, research labs, employee amenities, innovation hub"
+    },
+    {
+        "id": "13",
+        "title":"MIT",
+        "image": "template13.jpg",
+        "prompt": "iconic campus buildings, research labs, students and professors, books and laptops, academic discussions, innovation-focused atmosphere"
+    },
+    {
+        "id": "14",
+        "title":"Stanford University",
+        "image": "template14.jpg",
+        "prompt": "picturesque campus, advanced research facilities, collaborative student projects, academic presentations, high-tech environment"
+    },
+    {
+        "id": "15",
+        "title":"Berkeley",
+        "image": "template15.jpg",
+        "prompt": "historic campus, cutting-edge research labs, scholarly discussions, diverse student body, innovative research environment"
+    },
+    {
+        "id": "16",
+        "title":"Silicon Valley",
+        "image": "template16.jpg",
+        "prompt": "high-tech office buildings, innovation labs, tech startups, collaborative workspaces, futuristic technology, entrepreneurial spirit"
+    },
+    {
+        "id": "17",
+        "title":"Shenzhen High-Tech Industrial Park",
+        "image": "template17.jpg",
+        "prompt": "modern tech park, advanced research facilities, startup incubators, tech exhibitions, innovative products, rapid development"
+    },
+    {
+        "id": "18",
+        "title":"Cambridge Science Park",
+        "image": "template18.jpg",
+        "prompt": "science-focused tech park, research institutions, collaborative projects, high-tech labs, academic-industry partnerships, innovative environment"
+    },
+    {
+        "id": "19",
+        "title":"Binance Office",
+        "image": "template19.jpg",
+        "prompt": "sleek modern office, Binance logo, trading screens, team discussions, crypto market data, high-security environment"
+    },
+    {
+        "id": "20",
+        "title":"Coinbase Office",
+        "image": "template20.jpg",
+        "prompt": "contemporary workspace, Coinbase logo, financial data screens, collaborative meetings, advanced tech equipment, professional atmosphere"
+    },
+    {
+        "id": "21",
+        "title":"Kraken Office",
+        "image": "template21.jpg",
+        "prompt": "high-tech office space, Kraken logo, trading terminals, team brainstorming sessions, crypto charts, secure environment"
+    },
+    {
+        "id": "22",
+        "title":"ETHGlobal Hackathons",
+        "image": "template22.jpg",
+        "prompt": "energetic hackathon venue, coding teams, laptops with code, Ethereum branding, coffee stations, creative problem-solving"
+    },
+    {
+        "id": "23",
+        "title":"HackMIT",
+        "image": "template23.jpg",
+        "prompt": "university hackathon setting, student coders, tech workshops, collaborative coding, innovative projects, academic energy"
+    },
+    {
+        "id": "24",
+        "title":"TechCrunch Disrupt Hackathon",
+        "image": "template24.jpg",
+        "prompt": "large event space, diverse coding teams, tech presentations, intense coding sessions, networking areas, innovative atmosphere"
+    },
+    {
+        "id": "25",
+        "title":"Meetup Events",
+        "image": "template25.jpg",
+        "prompt": "informal community gathering, blockchain enthusiasts, discussion groups, whiteboards with ideas, friendly networking, collaborative spirit"
+    },
+    {
+        "id": "26",
+        "title":"DAO Community Gatherings",
+        "image": "template26.jpg",
+        "prompt": "decentralized organization meeting, crypto discussions, project presentations, community voting, collaborative planning, innovative environment"
+    },
+    {
+        "id": "27",
+        "title":"Local Blockchain Meetups",
+        "image": "template27.jpg",
+        "prompt": "local event space, blockchain discussions, small groups, tech demos, community engagement, grassroots innovation"
+    },
+    {
+        "id": "28",
+        "title":"New York Times Square",
+        "image": "template28.jpg",
+        "prompt": "bustling city square, iconic billboards, tourists taking selfies, urban background, night lights, vibrant atmosphere"
+    },
+    {
+        "id": "29",
+        "title":"San Francisco Golden Gate Bridge",
+        "image": "template29.jpg",
+        "prompt": "landmark bridge, scenic view, tourists with cameras, city background, iconic structure, picturesque setting"
+    },
+    {
+        "id": "30",
+        "title":"London Tower Bridge",
+        "image": "template30.jpg",
+        "prompt": "historic bridge, Thames River, tourists photographing, cityscape, iconic landmark, cultural atmosphere"
     }
 ]
\ No newline at end of file

src/components/Header.vue

 <template>
 	<div class="custom-navbar">
-		<img src="../assets/logo_.png" class="logo" @click="goIndex"></img>
+		<!-- <img src="../assets/logo_.png" class="logo" @click="goIndex"></img> -->
 
-		<div class="title">AON 3D Clothing</div>
-		<div class="right">
+		<div class="title">海报生成</div>
+		<!-- <div class="right">
 			<div class="right_count">
 				<img src="../assets/icons/money.png" class="moneyIcon"></img>
 				<span class="count">{{ balanceValue }}</span>
 			</div>
 			<img src="../assets/icons/user.png" v-if="!isUserPage" class="userIcon" @click="goUser"></img>
-		</div>
+		</div> -->
 	</div>
 </template>
 

src/main.ts

@@ -2,7 +2,8 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia';
-import { Uploader, Toast } from 'vant';
+import { Uploader, Toast,Field,RadioGroup, Radio,CellGroup,Cell} from 'vant';
+
 
 import App from './App.vue'
 import router from './router'
@@ -10,11 +11,18 @@ const pinia = createPinia();
 
 
 
+
 const app = createApp(App)
 
 app.use(router)
+app.use(CellGroup);
+app.use(Cell);
 app.use(Uploader)
+app.use(Field)
 app.use(Toast)
+app.use(Radio);
+app.use(RadioGroup);
+
 app.use(pinia)
 
 app.mount('#app')

src/views/Created.vue

@@ -62,7 +62,7 @@ async function downloadImage() {
 
 onMounted(() => {
 	imageUrl.value = route.query.url;
-	bus.emit('get_balance',"prediction");
+	// bus.emit('get_balance',"prediction");
 })
 </script>
 

src/views/Index.vue

@@ -3,13 +3,33 @@
 	<div>
 		<!-- 页面内容 -->
 		<div class="container">
-			<div class="banner">
+			<!-- <div class="banner">
 				<img src="../assets/images/banner.png" mode=""></img>
-				<p>AON 3D Clothing</p>
+				<p>海报生成</p>
 				<p>Customize your clothing logo and generate a 3D avatar</p>
-			</div>
-			<div class="uni-form-item uni-column">
-				<div class="title">Upload your photos</div>
+			</div> -->
+			<div>
+				<van-cell-group title="信息">
+					<van-field v-model="projectName" autosize label="项目名字" placeholder="请输入项目名称(背景展示项目文字)" />
+					<van-cell title="角色">
+						<van-radio-group v-model="checked" direction="horizontal" class="custom-radio-group">
+							<van-radio name="1" class="custom-radio">英俊男子</van-radio>
+							<van-radio name="2" class="custom-radio">漂亮女孩</van-radio>
+						</van-radio-group>
+					</van-cell>
+				</van-cell-group>
+
+				<!-- <van-cell-group title="角色">
+					<van-cell>
+						<van-radio-group v-model="checked" direction="horizontal">
+							<van-radio name="1">英俊男子</van-radio>
+							<van-radio name="2">漂亮女孩</van-radio>
+						</van-radio-group>
+					</van-cell>
+				</van-cell-group> -->
+				
+
+				<!-- <div class="title">Upload your photos</div>
 
 				<div class="content">
 					<div class="upload upload-done" v-if="imageStore.uploadedImageUrl">
@@ -26,7 +46,7 @@
 					</van-uploader>
 
 
-				</div>
+				</div> -->
 
 			</div>
 
@@ -38,11 +58,11 @@
 			</div> -->
 
 			<div class="uni-form-item uni-column">
-				<div class="title">Choose your template</div>
+				<div class="title">选择一个地点</div>
 				<div class="templateCon" v-if="templateList.length > 0">
 					<div v-for="(item, index) in templateList"
 						:class="`template_item ${Number(item.id) === templateId ? 'templateActive' : ''}`"
-						@click="selectTemplate(Number(item.id), item.image, item.prompt)" :key="index">
+						@click="selectTemplate(Number(item.id), item.image, item.prompt,item.title)" :key="index">
 						<img :src="item.image" alt="" />
 						<div :class="`isActiveIcon ${Number(item.id) === templateId ? 'active' : ''}`">
 							<img src="../assets/icons/selectIcon.png" alt="" v-if="Number(item.id) === templateId">
@@ -51,16 +71,16 @@
 				</div>
 			</div>
 
-			<div class="uni-form-item error-text" v-if="showError">
+			<!-- <div class="uni-form-item error-text" v-if="showError">
 				<div class="content">Please Upload your photos</div>
-			</div>
+			</div> -->
 			<div class="bottom_btn">
 				<div class="spendCount">
 					<img class="icon" src="../assets/icons/money.png" mode=""></img>
 					<text>-8</text>
 				</div>
 				<button class="submitBtn" @click="formSubmit">
-					<text>Generate img</text>
+					<text>生成海报</text>
 				</button>
 			</div>
 
@@ -81,13 +101,19 @@ import { useImageStore } from '@/store/imageStore';
 import 'vant/lib/index.css';
 import Loading from '../components/Loading.vue';
 import bus from '../eventBus.js';
+import { v4 as uuidv4 } from 'uuid';
 
 const router = useRouter()
 const imageStore = useImageStore();
 
+const projectName = ref('');
+const checked = ref('1');
+const image = ref('');
+
 const showLoading = ref(false);
 const showError = ref(false);
 const prompt = ref('');
+const location = ref('');
 const templateList = ref([]);
 const templateId = ref(1);
 
@@ -152,46 +178,52 @@ function deleteImg() {
 
 
 
-
 const formSubmit = async () => {
 	console.log(imageStore.uploadedImageUrl)
-	if (!imageStore.uploadedImageUrl) {
-		showError.value = true
-
-		setTimeout(() => {
-			showError.value = false
-		}, 3000)
-		return
-	}
+	// if (!imageStore.uploadedImageUrl) {
+	// 	showError.value = true
+
+	// 	setTimeout(() => {
+	// 		showError.value = false
+	// 	}, 3000)
+	// 	return
+	// }
 	showLoading.value = true
 	try {
 		// AI 使用方法
 		const ai_options = new AIOptions({
-			appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A'
+			appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A',
+			ai_server:"http://localhost:8088"
 		})
 
 		const aonet = new AI(ai_options)
 
-		const data = {
-			input: {
-				"prompt": "",
-				"cfg_scale": 1.2,
-				"num_steps": 4,
-				"image_width": 768,
-				"num_samples": 1,
-				"image_height": 1024,
-				"output_format": "webp",
-				"identity_scale": 0.8,
-				"mix_identities": false,
-				"output_quality": 80,
-				"generation_mode": "fidelity",
-				"main_face_image": imageStore.uploadedImageUrl,
-				"negative_prompt": ""
+		let person_text = checked.value == '1' ?  "A handsome person" : "A beautiful girl"
+
+		let prompt_temp = `At ${location.value}, ${prompt.value}, ${person_text} stand forward, one large screen in the background with ${projectName.value} displayed`
+
+		let temp_input = {
+			"cfg":3.5,
+			"steps":28,
+			"prompt":prompt_temp,
+			"aspect_ratio":"9:16",
+			"output_format":"png",
+			"output_quality":90,
+			"negative_prompt":"",
+			"prompt_strength":0.85
+		}
+
+		if (image && image.length) {
+			temp_input.image = image.value
 		}
+
+		const data = {
+			input: temp_input
 		}
 		console.log("formSubmit data", data)
 		let price = 8
-		let response = await aonet.prediction("/predictions/ai/pulid", data, price)
+		let excuteId = uuidv4()
+		let response = await aonet.prediction_with_server("/predictions/ai/stable-diffusion-3", data, excuteId)
 		console.log("test", response)
 		if (response && response.code == 200 && response.data) {
 			response = response.data
@@ -233,14 +265,25 @@ async function getTemplateList() {
 		const list = await getTemplate()
 		templateList.value = list
 		prompt.value = list[0].prompt
+		location.value = list[0].title
+		console.log("getTemplateList",list[0])
+		let imageUrl = list[0].image
+		if (imageUrl.indexOf("localhost") < 0 || imageUrl.indexOf("127.0.0.1") < 0) {
+			image.value = imageUrl
+		}
 	} catch (error) {
 		console.log(error)
 	}
 }
 
-function selectTemplate(id, imageUrl, prompt_) {
+function selectTemplate(id, imageUrl, prompt_,title) {
+	console.log("selectTemplate = ",id,imageUrl,prompt_)
 	templateId.value = id
 	prompt.value = prompt_
+	location.value = title
+	if (imageUrl.indexOf("localhost") < 0 || imageUrl.indexOf("127.0.0.1") < 0) {
+		image.value = imageUrl
+	}
 }
 
 async function login_108() {
@@ -344,12 +387,29 @@ async function login_1012() {
 onMounted(() => {
 	getTemplateList()
 	// login_108()
-	login_1012()
+	// login_1012()
 })
 
 </script>
 
 <style scoped>
+.custom-radio-group {
+  display: flex;
+  justify-content: flex-start; /* 确保 radio 组内项目从左对齐 */
+}
+
+.custom-radio {
+  display: flex;
+  align-items: center; /* 确保 radio 和文字在垂直方向居中 */
+  justify-content: flex-start; /* 确保内容在水平方向左对齐 */
+  margin-right: 16px;  /* 添加间距 */
+  flex: none; /* 防止 radio 项目拉伸 */
+}
+
+.van-radio__label {
+  text-align: left; /* 强制标签文本左对齐 */
+}
+
 .banner {
 	width: 100%;
 	height: 27.73vw;

src/views/User.vue

@@ -202,7 +202,7 @@ async function login() {
 
 onMounted(() => {
 	// getAccount()
-	login()
+	// login()
 })
 
 </script>