up

package-lock.json

@@ -11,8 +11,10 @@
         "aonweb": "^1.0.13",
         "aos": "^2.3.4",
         "axios": "^1.6.8",
+        "canvas-text-wrapper": "^0.10.2",
         "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",
@@ -1867,6 +1869,18 @@
         "web3-eth-accounts": "^4.1.2"
       }
     },
+    "node_modules/aonweb/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/aos": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
@@ -2052,6 +2066,11 @@
         }
       ]
     },
+    "node_modules/canvas-text-wrapper": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/canvas-text-wrapper/-/canvas-text-wrapper-0.10.2.tgz",
+      "integrity": "sha512-nFnN8q8ydtkBUWVn/dAdetpwNOkz3KtyD6jTI2HGD43ant2FQcnLugAVaGLJloyRTNK/exn7efpYy2zPV5bHiQ=="
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3807,9 +3826,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
@@ -5698,6 +5717,13 @@
         "uuid": "^9.0.1",
         "web3": "^4.8.0",
         "web3-eth-accounts": "^4.1.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "9.0.1",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+          "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+        }
       }
     },
     "aos": {
@@ -5818,6 +5844,11 @@
       "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
       "dev": true
     },
+    "canvas-text-wrapper": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/canvas-text-wrapper/-/canvas-text-wrapper-0.10.2.tgz",
+      "integrity": "sha512-nFnN8q8ydtkBUWVn/dAdetpwNOkz3KtyD6jTI2HGD43ant2FQcnLugAVaGLJloyRTNK/exn7efpYy2zPV5bHiQ=="
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -6995,9 +7026,9 @@
       }
     },
     "uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="
     },
     "vant": {
       "version": "4.9.1",

src/components/Header.vue

@@ -127,7 +127,7 @@ onMounted(() => {
 	text-align: left;
 	font-style: normal;
 	text-transform: none;
-	margin-left: 2.13vw;
+	/* margin-left: 2.13vw; */
 }
 
 .right {

src/views/Index.vue

@@ -9,15 +9,22 @@
 				<p>Customize your clothing logo and generate a 3D avatar</p>
 			</div> -->
 			<div>
-				<van-cell-group title="输入一个职业或概念：">
-					<van-field v-model="projectName" autosize label="" placeholder="请输入" />
+				<!-- <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> -->
+
+				<div class="uni-form-item uni-column">
+					<div class="title">输入一个职业或概念：</div>
+					<div class="content">
+						<input v-model="projectName" name="input" placeholder="请输入" />
+					</div>
+				</div>
 
 				<!-- <van-cell-group title="角色">
 					<van-cell>
@@ -151,8 +158,8 @@ Rules: go deep, be specific. Find hilarious tragedy. Do not be racist. For obvio
 
 const maxSize = 30 * 1024 * 1024;
 
-function goToComplete(url,quotes,headline) {
-	const query = { url: url ,quotes:quotes,headline:headline}
+function goToComplete(url, quotes, headline) {
+	const query = { url: url, quotes: quotes, headline: headline }
 	router.push({
 		path: '/created',
 		query
@@ -211,14 +218,14 @@ async function instruct() {
 		// AI 使用方法
 		const ai_options = new AIOptions({
 			appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A',
-			ai_server:"http://localhost:8088"
+			ai_server: "http://localhost:8088"
 		})
 
 		const aonet = new AI(ai_options)
 
 
 		let temp_input = {
-			"prompt":`${system_prompt}\n\n${user_prompt}`,
+			"prompt": `${system_prompt}\n\n${user_prompt}`,
 			"max_new_tokens": 512,
 			"prompt_template": "{prompt}"
 		}
@@ -261,14 +268,14 @@ async function grenerate(image_description) {
 		// AI 使用方法
 		const ai_options = new AIOptions({
 			appId: 'k3ebyfaSz8b87xJb_VyEGXx_AJ0MM8ngqU7Ym3AKeW8A',
-			ai_server:"http://localhost:8088"
+			ai_server: "http://localhost:8088"
 		})
 
 		const aonet = new AI(ai_options)
 
 
 		let temp_input = {
-			"prompt":image_description,
+			"prompt": image_description,
 			"scheduler": "K_EULER"
 		}
 		const data = {
@@ -306,15 +313,15 @@ async function grenerate(image_description) {
 
 async function getImage(url) {
 	try {
-		console.log("getImage url = ",url)
+		console.log("getImage url = ", url)
 		const response = await fetch(url);
 		if (!response.ok) {
 			return null
 		}
-		console.log("getImage response = ",response)
+		console.log("getImage response = ", response)
 		// let data = await response.arrayBuffer()
 		const blob = await response.blob();
-		console.log("getImage data = ",blob)
+		console.log("getImage data = ", blob)
 		const base64ImageData = await new Promise((resolve, reject) => {
 			const reader = new FileReader();
 			reader.onloadend = () => resolve(reader.result);
@@ -322,7 +329,7 @@ async function getImage(url) {
 			reader.readAsDataURL(blob);
 		});
 		// var base64ImageData = 'data:image/png;base64,' + btoa(String.fromCharCode.apply(null, new Uint8Array(data)));
-		console.log("getImage base64ImageData = ",base64ImageData)
+		console.log("getImage base64ImageData = ", base64ImageData)
 		return base64ImageData
 	} catch (error) {
 		console.error('Error fetching image:', error);
@@ -354,16 +361,16 @@ async function downloadImage() {
 }
 
 
-function createImage(headline,quotes,url) {
+function createImage(headline, quotes, url) {
 	// const canvas = this.$refs.canvas;
 	const canvas = canvasRef.value;
-	console.log("createImage canvas = ",canvas,base_img)
+	console.log("createImage canvas = ", canvas, base_img)
 
 	const ctx = canvas.getContext('2d');
 	const image = new Image();
 	image.onload = () => {
 		ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
-	    drawOverlay(ctx,headline,quotes,url);
+		drawOverlay(ctx, headline, quotes, url);
 	};
 	image.src = base_img;
 
@@ -372,7 +379,7 @@ function createImage(headline,quotes,url) {
 	// 
 }
 
-function wrapText (context,text, x, y, maxWidth, lineHeight) {
+function wrapText(context, text, x, y, maxWidth, lineHeight) {
 	if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
 		return;
 	}
@@ -405,13 +412,13 @@ function wrapText (context,text, x, y, maxWidth, lineHeight) {
 	context.fillText(line, x, y);
 };
 
-async function drawOverlay(ctx,headline,quotes,url) {
-	console.log("drawOverlay url = ",headline,quotes,url)
+async function drawOverlay(ctx, headline, quotes, url) {
+	console.log("drawOverlay url = ", headline, quotes, url)
 	let font_size = 18
 
 	ctx.font = font_size + 'px Arial';
 	ctx.textBaseline = 'top';
-	wrapText(ctx,headline, 530, 50,240);
+	wrapText(ctx, headline, 530, 50, 240);
 
 	const positions = [
 		{ x: 30, y: 140 }, { x: 530, y: 140 }, { x: 30, y: 250 },
@@ -420,14 +427,14 @@ async function drawOverlay(ctx,headline,quotes,url) {
 	];
 
 	for (let i = 0; i < quotes.length && i < positions.length; i++) {
-		wrapText(ctx,quotes[i], positions[i].x, positions[i].y,240);
+		wrapText(ctx, quotes[i], positions[i].x, positions[i].y, 240);
 	}
 
 	const img_x = (canvasWidth.value - 250) / 2;
 	const img_y = (canvasHeight.value - 250) / 2;
 	const image1 = new Image();
 	image1.onload = () => {
-		console.log("drawOverlay image1 = ",image1,img_x,img_y)
+		console.log("drawOverlay image1 = ", image1, img_x, img_y)
 		ctx.drawImage(image1, img_x, img_y, 250, 250);
 	};
 	let imagedata = await getImage(url)
@@ -463,12 +470,12 @@ const formSubmit = async () => {
 			for (let i = 0; i < output_lines.length; i++) {
 				let str = output_lines[i]
 				// console.log("str before =",str)
-				let temp = str.replaceAll(" ","")
+				let temp = str.replaceAll(" ", "")
 				// console.log("temp after =",temp)
 				if (temp.startsWith("-") || temp.startsWith(" -")) {
 					quotes.push(str)
 					if (i > 0 && !headline) {
-						headline = output_lines[i-1]
+						headline = output_lines[i - 1]
 					}
 				}
 				if (temp.startsWith("Image:") || temp.startsWith("Image: ")) {
@@ -480,16 +487,16 @@ const formSubmit = async () => {
 			if (image_description.indexOf('Image') > -1) {
 				image_description = image_description.replace("Image: ", "").trim()
 			}
-			console.log("image_description = ",image_description)
+			console.log("image_description = ", image_description)
 			let output = await grenerate(image_description)
 			if (output && output.length) {
-				createImage(headline,quotes,output[0])
+				createImage(headline, quotes, output[0])
 			}
 		}
 	} catch (error) {
 		showLoading.value = false
 		// showToast('AI processing failed')
-		console.log("formSubmit error = ",error)
+		console.log("formSubmit error = ", error)
 		if (error && typeof error == 'string') {
 			showToast(error);
 		} else {
@@ -505,7 +512,7 @@ async function getTemplateList() {
 		templateList.value = list
 		prompt.value = list[0].prompt
 		location.value = list[0].title
-		console.log("getTemplateList",list[0])
+		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
@@ -515,8 +522,8 @@ async function getTemplateList() {
 	}
 }
 
-function selectTemplate(id, imageUrl, prompt_,title) {
-	console.log("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
@@ -635,19 +642,25 @@ onMounted(() => {
 <style scoped>
 .custom-radio-group {
 	display: flex;
-  justify-content: flex-start; /* 确保 radio 组内项目从左对齐 */
+	justify-content: flex-start;
+	/* 确保 radio 组内项目从左对齐 */
 }
 
 .custom-radio {
 	display: flex;
-  align-items: center; /* 确保 radio 和文字在垂直方向居中 */
-  justify-content: flex-start; /* 确保内容在水平方向左对齐 */
-  margin-right: 16px;  /* 添加间距 */
-  flex: none; /* 防止 radio 项目拉伸 */
+	align-items: center;
+	/* 确保 radio 和文字在垂直方向居中 */
+	justify-content: flex-start;
+	/* 确保内容在水平方向左对齐 */
+	margin-right: 16px;
+	/* 添加间距 */
+	flex: none;
+	/* 防止 radio 项目拉伸 */
 }
 
 .van-radio__label {
-  text-align: left; /* 强制标签文本左对齐 */
+	text-align: left;
+	/* 强制标签文本左对齐 */
 }
 
 .banner {
@@ -704,6 +717,7 @@ onMounted(() => {
 
 .uni-form-item {
 	margin-bottom: 8.53vw;
+	overflow: scroll;
 }
 
 .uni-form-item .content {