fisrt commit

package.json

@@ -14,8 +14,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",

public/templates/template.json

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

@@ -2,7 +2,8 @@
 	<div class="">
 		<div class="container created">
 			<div class="resCon">
-				<img class="res_img" :src="imageUrl" mode=""></img>
+				<!-- <img class="res_img" :src="imageUrl" mode=""></img> -->
+				<canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
 			</div>
 
 			<div class="download">
@@ -23,10 +24,16 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
 import bus from '../eventBus.js';
+import base_img from '../assets/images/canvas.png'
 const router = useRouter()
 const route = useRoute()
 
 const imageUrl = ref('')
+const quotes = ref([])
+const headline = ref('')
+
+const canvasWidth = ref(800)
+const canvasHeight = ref(600)
 
 function goToCreate() {
 	router.push({
@@ -60,9 +67,24 @@ async function downloadImage() {
 	}
 }
 
+function createImage(headline,quotes,url) {
+	const canvas = this.$refs.canvas;
+	const ctx = canvas.getContext('2d');
+	const image = new Image();
+
+	image.onload = () => {
+	ctx.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
+	this.drawOverlay(ctx);
+	};
+	image.src = base_img;
+}
+
 onMounted(() => {
 	imageUrl.value = route.query.url;
-	bus.emit('get_balance',"prediction");
+	quotes.value = route.query.quotes;
+	headline.value = route.query.headline;
+	createImage()
+	// bus.emit('get_balance',"prediction");
 })
 </script>
 

src/views/User.vue

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