Skip to content

M
meme_image
Commit cde532c2 authored by web's avatar web
Browse files
Options

up

parent e013c5a4
Show whitespace changes
Inline Side-by-side
Showing with 625 additions and 759 deletions
package-lock.json
View file @ cde532c2
......@@ -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
View file @ cde532c2
......@@ -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
View file @ cde532c2
......@@ -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 {
......
yarn.lock
View file @ cde532c2
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment