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>
@@ -27,7 +34,7 @@
 						</van-radio-group>
 					</van-cell>
 				</van-cell-group> -->
-				
+
 
 				<!-- <div class="title">Upload your photos</div>
 
@@ -60,7 +67,7 @@
 			<div class="uni-form-item uni-column">
 				<canvas ref="canvasRef" :width="canvasWidth" :height="canvasHeight"></canvas>
 			</div>
-			
+
 
 			<!-- <div class="uni-form-item uni-column">
 				<div class="title">选择一个地点</div>
@@ -79,7 +86,7 @@
 			<!-- <div class="uni-form-item error-text" v-if="showError">
 				<div class="content">Please Upload your photos</div>
 			</div> -->
-			
+
 			<div class="bottom_btn">
 				<!-- <div class="spendCount">
 					<img class="icon" src="../assets/icons/money.png" mode=""></img>
@@ -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,16 +218,16 @@ 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}"
+			"prompt_template": "{prompt}"
 		}
 		const data = {
 			input: temp_input
@@ -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,29 +313,29 @@ 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);
-            reader.onerror = reject;
-            reader.readAsDataURL(blob);
-        });
+			const reader = new FileReader();
+			reader.onloadend = () => resolve(reader.result);
+			reader.onerror = reject;
+			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);
 		return null
 	}
-	
+
 }
 
 async function downloadImage() {
@@ -354,64 +361,64 @@ 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;
 
-  	// ctx.drawImage(generated_img, img_x, img_y, 250, 250);
+	// ctx.drawImage(generated_img, img_x, img_y, 250, 250);
 
 	// 
 }
 
-function wrapText (context,text, x, y, maxWidth, lineHeight) {
-    if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
-        return;
-    }
-    
-    var canvas = context.canvas;
-    
-    if (typeof maxWidth == 'undefined') {
-        maxWidth = (canvas && canvas.width) || 300;
-    }
-    if (typeof lineHeight == 'undefined') {
-        lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
-    }
-    
-    // 字符分隔为数组
-    var arrText = text.split('');
-    var line = '';
-    
-    for (var n = 0; n < arrText.length; n++) {
-        var testLine = line + arrText[n];
-        var metrics = context.measureText(testLine);
-        var testWidth = metrics.width;
-        if (testWidth > maxWidth && n > 0) {
-            context.fillText(line, x, y);
-            line = arrText[n];
-            y += lineHeight;
-        } else {
-            line = testLine;
-        }
-    }
-    context.fillText(line, x, y);
+function wrapText(context, text, x, y, maxWidth, lineHeight) {
+	if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
+		return;
+	}
+
+	var canvas = context.canvas;
+
+	if (typeof maxWidth == 'undefined') {
+		maxWidth = (canvas && canvas.width) || 300;
+	}
+	if (typeof lineHeight == 'undefined') {
+		lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
+	}
+
+	// 字符分隔为数组
+	var arrText = text.split('');
+	var line = '';
+
+	for (var n = 0; n < arrText.length; n++) {
+		var testLine = line + arrText[n];
+		var metrics = context.measureText(testLine);
+		var testWidth = metrics.width;
+		if (testWidth > maxWidth && n > 0) {
+			context.fillText(line, x, y);
+			line = arrText[n];
+			y += lineHeight;
+		} else {
+			line = testLine;
+		}
+	}
+	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 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)
@@ -436,13 +443,13 @@ async function drawOverlay(ctx,headline,quotes,url) {
 
 const formSubmit = async () => {
 	console.log(projectName)
-	if (!(projectName && projectName.value &&  projectName.value.length)) {
-	 	showError.value = true
+	if (!(projectName && projectName.value && projectName.value.length)) {
+		showError.value = true
 
-	 	setTimeout(() => {
- 			showError.value = false
-	 	}, 3000)
-	 	return
+		setTimeout(() => {
+			showError.value = false
+		}, 3000)
+		return
 	}
 
 	showLoading.value = true
@@ -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,23 +487,23 @@ 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 {
 			showToast(error.message);
 		}
 	}
-	
+
 }
 
 async function getTemplateList() {
@@ -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
@@ -529,7 +536,7 @@ async function login_108() {
 	try {
 		let time = new Date().getTime()
 		console.log(`demo index login in time = ${time}`)
-		
+
 		let user = new User()
 		let temp = await user.islogin()
 		console.log(`demo index islogin res time = ${new Date().getTime() - time}`)
@@ -575,7 +582,7 @@ async function login_108() {
 }
 
 function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+	return new Promise(resolve => setTimeout(resolve, ms));
 }
 
 async function login_1012() {
@@ -593,13 +600,13 @@ async function login_1012() {
 			});
 			console.log(`demo index showLoadingToast end time = ${time}`)
 			for (let i = 0; i < 5; i++) {
-			// console.log("getOwnedUsers i = ",i)
+				// console.log("getOwnedUsers i = ",i)
 				let result = await user.getOwnedUsers()
 				let userid = result && result._userIds && result._userIds.length && result._userIds[0]
 				if (userid && userid.length) {
 					break
 				}
-				await sleep(300)       
+				await sleep(300)
 			}
 			closeToast();
 			temp = await user.islogin()
@@ -634,20 +641,26 @@ onMounted(() => {
 
 <style scoped>
 .custom-radio-group {
-  display: flex;
-  justify-content: flex-start; /* 确保 radio 组内项目从左对齐 */
+	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 项目拉伸 */
+	display: flex;
+	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 {