Generate brief with AI (#593)

* Generate brief with AI * wip * en api key
SaTT-Wallet · Oct 4, 2023 · 8d0fb87 · 8d0fb87
1 parent b9ebeee
commit 8d0fb87
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 34 deletions.
diff --git a/...ampaigns/components/draft-campaign-presentation/draft-campaign-presentation.component.css b/...ampaigns/components/draft-campaign-presentation/draft-campaign-presentation.component.css
@@ -446,4 +446,25 @@ ng-deep .cropper .resize-bar {
 
 ::ng-deep.CodeMirror pre {
     white-space: pre !important;
-}
+}
+.btn-blue {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 48.4px;
+    align-items: center;
+    text-align: center;
+    letter-spacing: 0.03em;
+    border: none;
+    color: #ffff;
+    background: #4048ff;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 30px;
+    width: 100%;
+    height: 48px;
+}
+
+.btn-blue:hover:enabled {
+    background: linear-gradient(85.14deg, #f52079 -1.05%, #4048ff 103.39%);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
diff --git a/...mpaigns/components/draft-campaign-presentation/draft-campaign-presentation.component.html b/...mpaigns/components/draft-campaign-presentation/draft-campaign-presentation.component.html
@@ -8,24 +8,52 @@
       }}</label>
     </div>
 
+
     <div class="row d-flex justify-content-center pt-3 mb-1">
-      <div class="col-xl-10 col-md-12 col-lg-10 col-sm-12">
+      <div class="col-xl-5 col-md-6 col-lg-5 col-sm-6 col-12">
         <label
-          class="label-type d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-sm-start justify-content-center"
-          >{{ 'campaign_name' | translate }}</label
+        class="label-type d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-sm-start justify-content-center"
+        >{{ 'campaign_name' | translate }}</label
+      >
+      <input type="text" name="" formControlName="title" class="input-type" />
+      <div class="error">
+        <span
+          *ngIf="
+            this.form.get('title')?.errors?.required &&
+            notValidPresentation
+          "
+          >{{ 'Profil.field_required' | translate }}</span
         >
-        <input type="text" name="" formControlName="title" class="input-type" />
-        <div class="error">
-          <span
-            *ngIf="
-              this.form.get('title')?.errors?.required &&
-              notValidPresentation
-            "
-            >{{ 'Profil.field_required' | translate }}</span
-          >
-        </div>
+      </div>
+
+      </div>
+      <div class="col-md-6 col-md-6 col-lg-5 col-sm-6 col-12 pt-3-mobile">
+        <label
+        class="label-type d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-sm-start justify-content-center"
+        >{{ 'campaign_Ai' | translate }}</label
+      >
+      <button
+      type="button"
+      class="btn-blue"
+      [disabled]="form.get('title')?.value.length === 0 || isGenerating"
+      (click)="generateBrief()"
+    >
+      <div *ngIf="!isGenerating">
+        <!-- Show the button label when not generating -->
+        {{ 'generate_campaign_Ai' | translate }}
+      </div>
+      <div
+ *ngIf="isGenerating"
+ class="spinner-border text-light"
+ role="status"
+ >
+ <span class="sr-only">Loading...</span>
+ </div>
+    </button>
+
       </div>
     </div>
+
     <div class="row d-flex justify-content-center pt-3 mb-1">
       <div class="col-xl-5 col-md-6 col-lg-5 col-sm-6 col-12">
         <label
@@ -95,22 +123,12 @@
         >
           {{ 'create_campaign_form.give_description' | translate }}
         </label>
-
-        <div
-          class="NgxEditor__Wrappe"
-          height="400"
-          minheight="200"
-          width="400"
-          minWidth="400"
-        >
-          <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
-          </ngx-editor-menu>
-          <ngx-editor
-            [editor]="editor"
-            editable="true"
-            formControlName="description"
-          ></ngx-editor>
+
+        <div class="NgxEditor__Wrappe" height="400" minheight="200" width="400" minWidth="400">
+          <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"></ngx-editor-menu>
+          <ngx-editor [editor]="editor" editable="true" formControlName="description"></ngx-editor>
         </div>
+
       </div>
     </div>
     <div class="row d-flex justify-content-center">

diff --git a/...campaigns/components/draft-campaign-presentation/draft-campaign-presentation.component.ts b/...campaigns/components/draft-campaign-presentation/draft-campaign-presentation.component.ts
@@ -18,6 +18,9 @@ import { DraftCampaignService } from '@campaigns/services/draft-campaign.service
 import { Campaign } from '@app/models/campaign.model';
 import { TranslateService } from '@ngx-translate/core';
 import { ImageTransform } from 'ngx-image-cropper';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { CampaignsService } from '@app/campaigns/facade/campaigns.facade';
 
 @Component({
   selector: 'app-draft-campaign-presentation',
@@ -36,6 +39,8 @@ export class DraftCampaignPresentationComponent implements OnInit {
   @Output() validFormPresentation = new EventEmitter();
   @Output() saveFormStatus = new EventEmitter();
   private render: Renderer2;
+  isGenerating: boolean = false;
+  ai_result :any;
   containWithinAspectRatio = false;
   form = new UntypedFormGroup({});
   editor = new Editor();
@@ -52,12 +57,22 @@ export class DraftCampaignPresentationComponent implements OnInit {
   draftId: string = '';
   private isDestroyed$ = new Subject();
 
+
+
   constructor(
+    private fb: FormBuilder,
+    private http: HttpClient,
     private service: DraftCampaignService,
     public translate: TranslateService,
+    private campaignFacade: CampaignsService,
     rendererFactory: RendererFactory2,
+
     @Inject(PLATFORM_ID) private platformId: string
   ) {
+    this.form = fb.group({
+      title: ['', Validators.required],
+      description: [''] // Assuming you have a description field in your form
+    });
     this.render = rendererFactory.createRenderer(null, null);
     this.form = new UntypedFormGroup({
       title: new UntypedFormControl('', Validators.required),
@@ -69,10 +84,19 @@ export class DraftCampaignPresentationComponent implements OnInit {
       ]),
       description: new UntypedFormControl('', Validators.required)
     }); 
-
-
   }
 
+
+  generateBrief() {
+    this.isGenerating = true;
+this.campaignFacade.generateBriefIA(this.form.get('title')?.value).subscribe((data:any) => {
+this.ai_result= data.choices[0].message.content;
+this.form.patchValue({ description: this.ai_result });
+this.isGenerating = false; 
+  })
+}
+
+
   ngOnInit(): void {
     this.saveForm();
     this.emitFormStatus();

diff --git a/src/app/campaigns/facade/campaigns.facade.ts b/src/app/campaigns/facade/campaigns.facade.ts
@@ -78,4 +78,8 @@ export class CampaignsService implements CampaignsFacade {
   getWelcomePageStats() {
     return this.campaignsHttpApiService.getWelcomePageStats();
   }
+
+  generateBriefIA(title: string) {
+    return this.campaignsHttpApiService.generateBrief(title);
+  }
 }
diff --git a/src/app/core/services/campaign/campaign.service.ts b/src/app/core/services/campaign/campaign.service.ts
@@ -109,6 +109,21 @@ export class CampaignHttpApiService {
       hash
     });
   }
+  generateBrief(title: string) {
+    console.log(title);
+    const apiUrl = 'https://api.openai.com/v1/chat/completions';
+    const payload = {
+      "model": "gpt-3.5-turbo",
+      "messages": [{"role": "user", "content": "please create a comprehensive Influencer Campaign Brief for me that will serve as an explanatory sheet for integration into a campaign presentation platform. We need title, description, short description, rules, and examples."+ title, }],
+      "temperature": 0.7
+    };
+
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+  Authorization: 'Bearer ' +  env.API_AI,
+    });
+    return this.http.post(`${apiUrl}`, payload, { headers });
+  }
 
   getBestInfluencerPic(id: any) {
     return this.http.get(sattUrl + `/profile/picture?id=${id}`, {

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -643,7 +643,8 @@
   "create_campaign_form.create_new_campaign": "Finalize my Pool",
   "create_campaign_form.alert_required": "Warning! Please fill in the necessary fields",
   "create_campaign_form.summary_maxlength": "Summary must contain a maximum of 250 characters",
-
+  "generate_campaign_Ai": "Generate brief",
+  "campaign_Ai":"Adpool Brief IA generator",
   "date": "Date",
   "description": "Description",
   "desktop": "Desktop",

diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
@@ -341,7 +341,8 @@
   "create_campaign_form.alert_expire": "La campagne débutera 1 heure après la validation de la campagne.",
   "create_campaign_form.generate_preview": "Générer un aperçu",
   "create_campaign_form.create_new_campaign": "Finaliser AdPool.",
-
+  "generate_campaign_Ai": "Générer un brief",
+  "campaign_Ai":"Générateur Adpool Brief IA",
   "create_campaign_form.alert_required": "Attention! Veuillez remplir les champs nécessaires",
   "create_campaign_form.summary_maxlength": "Le résumé doit contenir un maximum de 250 caractères",
   "date": "Date",

diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -8,6 +8,7 @@ export const environment = {
     'https://api.thegraph.com/subgraphs/name/atayen/satt--bsc-mainnet',
   url_subgraph_ether:
     'https://api.thegraph.com/subgraphs/name/atayen/satt-ether-mainnet',
+    API_AI: '',
 
   addresses: {
     smartContracts: {

diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -11,7 +11,7 @@ export const environment = {
   //https://api-preprod2.satt-token.com
 
   API_URL: 'https://api-preprod2.satt-token.com',
-
+  API_AI: '',
   url_subgraph_bsc:
     'https://api.thegraph.com/subgraphs/name/atayen/satt-testnet',
   url_subgraph_ether: