csdn1233 4 сар өмнө
parent
commit
31eeefa54a

+ 10 - 5
AIart-app/src/app/interest-picture/interest-picture.component.html

@@ -1,16 +1,21 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      示例:情景创作{{imagineWork?.progress || 0}}
+      意境呈现{{imagineWork?.progress || 0}}
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <!-- 生成提示词 -->
-  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="情景创作" autoGrow="true"></ion-textarea>
-  <ion-button (click)="createImage()" expand="block">情景创作</ion-button>
-
+  <div style="background-color: #fcfafafa;margin: 15px;border-radius: 10px;padding-top: 10px;">
+    <!-- 生成提示词 -->
+    <span style="font-weight: bold;font-size: 20px;margin-left: 10px;">logo设想</span>
+    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="logo创作" autoGrow="true"
+      style="margin-left: 10px;text-decoration: underline;opacity: 0.5;"></ion-textarea>
+  </div>
+  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px;">
+    <ion-button (click)="createImage()" expand="block" style="width: 90%;">logo创作</ion-button>
+  </div>
   <!-- 意境画面提示词 -->
   <div>
     {{PictureDescResult}}

+ 13 - 6
AIart-app/src/app/interest-picture/interest-picture.component.ts

@@ -19,7 +19,7 @@ export class InterestPictureComponent implements OnInit {
   ngOnInit(): void {
 
   }
-  userPrompt: string = "犬吠水声中,桃花带露浓。\n树深时见鹿,溪午不闻钟。"
+  userPrompt: string = "请输入项目的简要内容"
   promptInput(ev: any) {
     this.userPrompt = ev.detail.value;
   }
@@ -38,8 +38,8 @@ export class InterestPictureComponent implements OnInit {
   async createImage() {
     this.imagineWork = new ImagineWork();
     let PromptTemplate = `
-    您是一名专业的美术画家,请您根据古诗文的内容,将其描述的画面、场景、人物、物品等用最简短的语言表达,直接给出画面,并且以中国古风意境为主
-    诗文如下:
+    您是一名专业的logo设计师,请您根据项目的内容,将其描述的内容等用最简短的语言表达
+    项目内容如下:
     ${this.userPrompt}
     `
     let completion = new FmodeChatCompletion([
@@ -52,8 +52,8 @@ export class InterestPictureComponent implements OnInit {
       // 赋值消息内容给组件内属性
       this.PictureDescResult = message.content
       if (message?.complete) {
-        let PicturePrompt
-        let options: DalleOptions = { prompt: this.userPrompt }
+        let PicturePrompt = `${this.PictureDescResult}\n根据描述的内容生成一张与项目名称“AI艺速”相关的logo图片,画面包含元素:画笔,ai字母,风。风格简约大气,画面以彩色为主色调且不带任何文字(画面越简单越好)`
+        let options: DalleOptions = { prompt: PicturePrompt }
         this.imagineWork?.draw(options).subscribe(work => {
           console.log("imagineWork", work?.toJSON())
           console.log("images", work?.get("images"))
@@ -65,4 +65,11 @@ export class InterestPictureComponent implements OnInit {
     })
   }
 
-}
+}
+
+// # "AI艺速"项目策划书
+// 项目设想
+
+//   - 行业:兴趣教育与技能培训领域
+//     - 用户:对各类新鲜事物抱有三分钟热度、渴望快速入门体验的广大人群
+//       - 功能:通过程序依据用户感兴趣的内容提供相应的浅显教学步骤及基础指导。

+ 20 - 8
AIart-app/src/app/interest-test/interest-test.component.html

@@ -1,18 +1,30 @@
+<ion-header [translucent]="true">
+    <ion-toolbar>
+        <ion-title style="font-family: 'Courier New', Courier, monospace;">
+            <span style="font-weight: bold;">兴趣探索</span>
+        </ion-title>
+    </ion-toolbar>
+</ion-header>
+
 <ion-content>
     <!-- 文本域:生成提示词 -->
-    <h1>兴趣方向</h1>
-    <ion-textarea [value]="department" (ionInput)="departmentInput($event)" placeholder="文本提示词"
-        autoGrow="true"></ion-textarea>
-    <h1>具体描述</h1>
-    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词"
-        autoGrow="true"></ion-textarea>
+    <div style="background-color: #fcfafafa;margin: 15px;border-radius: 10px;padding-top: 10px;">
+        <span style="font-weight: bold;font-size: 20px;margin-left: 10px;">兴趣方向</span>
+        <ion-textarea [value]="department" (ionInput)="departmentInput($event)" placeholder="文本提示词" autoGrow="true"
+            style="margin-left: 10px;text-decoration: underline;opacity: 0.5;"></ion-textarea>
+        <span style="font-weight: bold;font-size: 20px;margin-left: 10px;">具体描述</span>
+        <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"
+            style="margin-left: 10px;text-decoration: underline;opacity: 0.5;"></ion-textarea>
+    </div>
 
     <!-- 按钮:执行消息生成函数 -->
-    <ion-button (click)="sendMessage()" expand="block">开始定制学习规划</ion-button>
+    <div style="display: flex;align-items: center;justify-content: center;">
+        <ion-button (click)="sendMessage()" expand="block" style="width: 90%;">开始定制学习规划</ion-button>
+    </div>
 
     <!-- 展示:返回消息内容 -->
     @if(!isComplete){
-    <div>{{responseMsg}}</div>
+    <div style="margin: 20px;">{{responseMsg}}</div>
     }
 
     @if(isComplete){

+ 3 - 0
AIart-app/src/app/interest-test/interest-test.component.scss

@@ -0,0 +1,3 @@
+.content-style {
+    margin: 50px;
+}

+ 1 - 1
AIart-app/src/app/interest-test/interest-test.component.ts

@@ -18,7 +18,7 @@ export class InterestTestComponent implements OnInit {
   }
   constructor() { }
   // 用户输入提示词
-  department: string = "学习方向"
+  department: string = "请给出学习方向,例如:绘画"
   departmentInput(ev: any) {
     this.department = ev.detail.value;
   }

+ 5 - 2
AIart-app/src/app/tab1/tab1.page.html

@@ -1,7 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title style="font-family: 'Courier New', Courier, monospace;">
-      AI艺速
+      <span>AI艺速</span>
+      <img src="../../assets/img/logo2.png" alt="AI艺速"
+        style="height: 20px;width: 20px;text-align: center;justify-content: center;margin-top: 3px;margin-left: 5px;">
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -30,7 +32,7 @@
             <ion-label>课程</ion-label>
           </ion-tab-button>
           <ion-tab-button tab="test" class="rounded-rectangle" (click)="goToInterestTest()">
-            <ion-label>兴趣测试</ion-label>
+            <ion-label>兴趣探索</ion-label>
             <ion-ripple-effect></ion-ripple-effect>
           </ion-tab-button>
           <ion-tab-button tab="ebook" class="rounded-rectangle" (click)="goToInterestPicture()">
@@ -136,4 +138,5 @@
     </div>
   </div>
   <!-- 下面轮播图展示部分结束 -->
+
 </ion-content>

+ 40 - 0
AIart-app/src/app/tab5/tab5.page.html

@@ -113,6 +113,7 @@
           <p style="margin: 0;">会员</p>
         </div>
         <div class="s-style">
+          <!-- <ion-icon name="card-outline" style="height: 25px;width: 25px;"></ion-icon> -->
           <ion-icon name="thumbs-up-outline" style="height: 25px;width: 25px;"></ion-icon>
           <p style="margin: 0;">打赏</p>
         </div>
@@ -128,4 +129,43 @@
     </div>
   </div>
   <!-- 我的账户结束 -->
+  <!-- 我的内容开始 -->
+  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;padding-bottom: 10px;">
+    <div style="margin-bottom: 20px;">
+      <span style="position: relative;margin-left: 20px;font-size: 20px;font-weight: bold;top: 10px;">我的内容</span>
+      <ion-icon name="chevron-forward-outline" style="position: relative;top: 12px;"></ion-icon>
+    </div>
+    <div style="margin-bottom: 20px;">
+      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
+          text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
+        <div class="s-style">
+          <ion-icon name="document-text-outline" style="height: 25px;width: 25px;"></ion-icon>
+          <p style="margin: 0;">笔记</p>
+        </div>
+        <div class="s-style" style="width: 70px;">
+          <ion-icon name="time-outline" style="height: 25px;width: 25px;"></ion-icon>
+          <p style="margin: 0;">最近学习</p>
+        </div>
+        <div class="s-style">
+          <ion-icon name="cloud-download-outline" style="height: 25px;width: 25px;"></ion-icon>
+          <p style="margin: 0;">下载</p>
+        </div>
+        <div class="s-style">
+          <ion-icon name="heart-outline" style="height: 25px;width: 25px;"></ion-icon>
+          <p style="margin: 0;">收藏</p>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin-bottom: 15px;">
+      <div style="display: flex;gap: 25px;
+          text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
+        <div class="s-style" style="width: auto;margin-left: 25px;">
+          <ion-icon name="bag-check-outline" style="height: 25px;width: 25px;"></ion-icon>
+          <p style="margin: 0;">订阅通知</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 我的账户结束 -->
 </ion-content>

+ 4 - 2
AIart-app/src/app/tabs/tabs.page.ts

@@ -7,7 +7,8 @@ import {
   chevronForwardOutline, storefrontOutline, businessOutline, documentsOutline,
   rocketOutline, sparklesOutline, medalOutline, listOutline, giftOutline,
   scanOutline, settingsOutline, heartCircleOutline, walletOutline, bagRemoveOutline,
-  folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline
+  folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline, documentTextOutline,
+  timeOutline, cloudDownloadOutline, bagCheckOutline, cardOutline
 } from 'ionicons/icons';
 
 @Component({
@@ -28,7 +29,8 @@ export class TabsPage {
       documentsOutline, rocketOutline, sparklesOutline, medalOutline, listOutline,
       giftOutline, scanOutline, settingsOutline, heartCircleOutline, walletOutline,
       bagRemoveOutline, folderOutline, readerOutline, cartOutline, thumbsUpOutline,
-      ticketOutline
+      ticketOutline, documentTextOutline, timeOutline, cloudDownloadOutline, bagCheckOutline,
+      cardOutline
     });
   }
 }

BIN
AIart-app/src/assets/img/all-logo.png


BIN
AIart-app/src/assets/img/logo2.png