discord auth and upscale button support

src/app/app.module.ts

@@ -4,11 +4,17 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HomeModule } from '../modules/home.module';  // updated import
 import { FormsModule } from '@angular/forms';
 import { SharedService } from 'src/app/shared.service';
-
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
+import { FaqComponent } from './home/faq/faq.component';
+
+const routes: Routes = [
+  { path: 'faq', component: FaqComponent },
+];
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -18,6 +24,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     HttpClientModule,
     FormsModule,
     HomeModule,
+    RouterModule.forRoot(routes),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: true,
       // Register the ServiceWorker as soon as the application is stable

src/app/home/faq/faq.component.css

@@ -29,3 +29,17 @@
   }
 
 }
+
+button img {
+  height: 50px;
+  width: auto;
+  margin-right: 10px;
+  border: 0;
+  padding: 0;
+}
+
+button {
+  background-color: #2fa5e9;
+  border: 0;
+  padding: 0;
+}

src/app/home/faq/faq.component.html

@@ -5,6 +5,16 @@
       <div class="col-md-12 ">
         <h2 class="mb-4">FAQ</h2>
         <div class="card">
+          <div class="card-header" *ngIf="!serverMember">
+            <h5 class="mb-0">
+              Login with Discord! Supporters get access to more features! (Upscaling images with more detail!)
+            </h5>
+          </div>
+          <div class="card-body" *ngIf="!serverMember">
+            <button (click)="authenticateWithDiscord()">
+              <img src="assets/DiscordLogin.png" alt="Login with Discord">
+          </button>
+          </div>
           <div class="card-header">
             <h5 class="mb-0">
               What are some tips for good images?

src/app/home/faq/faq.component.ts

@@ -1,14 +1,21 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { SharedService } from 'src/app/shared.service';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { StableDiffusionService } from 'src/app/stable-diffusion.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-faq',
   templateUrl: './faq.component.html',
   styleUrls: ['./faq.component.css']
 })
 export class FaqComponent implements OnInit, OnDestroy {
+  private clientId = '1186062405168549949';
+  private redirectUri = encodeURIComponent(environment.discordRedirectUri);
   prompt!: string;
+  serverMember: boolean = false;
   characterNames: string[] = [
     'Amy Rose', 'Barry the quokka', 'Big the cat', 'Blaze the cat', 'Bunnie Rabbot', 'Charmy the bee',
     'Cosmo the seedrian', 'Cream the rabbit', 'Eggman', 'Espio the chameleon', 'Fiona Fox', 'Honey the cat', 
@@ -25,12 +32,31 @@ export class FaqComponent implements OnInit, OnDestroy {
 
   private subscription: Subscription = new Subscription();
 
-  constructor(private sharedService: SharedService) { }
+  constructor(private sharedService: SharedService
+    , private route: ActivatedRoute
+    , private http: HttpClient
+    , private stableDiffusionService: StableDiffusionService) { }
 
   ngOnInit() {
     this.subscription = this.sharedService.getPrompt().subscribe(value => {
       this.prompt = value;
     });
+
+
+    this.route.queryParams.subscribe(params => {
+      console.log('Query Params:', params); // Add this to check if queryParams are received
+      const code = params['code'];
+      if (code) {
+        this.exchangeCode(code);
+      }
+    });
+
+    // Discord userdata check
+    this.sharedService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.serverMember = userData.is_member_of_your_guild;
+      }
+    });
   }
 
   changePrompt(newPrompt: string) {
@@ -53,4 +79,19 @@ export class FaqComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
+
+  authenticateWithDiscord() {
+    window.location.href = `https://discord.com/api/oauth2/authorize?client_id=${this.clientId}&redirect_uri=${this.redirectUri}&response_type=code&scope=identify%20guilds`;
+  }
+
+  private exchangeCode(code: string) {
+    this.stableDiffusionService.discordLogin({ code: code })
+        .subscribe(response => {
+            console.log(response);
+            this.sharedService.setUserData(response); // Assuming response contains user data
+        }, error => {
+            console.error(error);
+        });
+}
+
 }

src/app/home/options/options.component.html

@@ -12,8 +12,9 @@
     </button>
   </div>
 
-  <!-- inpaint switch -->
+  <!-- buttons that show with reference images expanded -->
   <div *ngIf="referenceImage" class="inpaint-button">
+    <!-- inpaint switch -->
     <p-button label="Inpainting" (click)="openImageModal()"></p-button>
     <span class="ms-1 text-primary"
       pTooltip="Allows you to draw on the image you uploaded using your mouse to specify what should be changed. The inpainted areas will be the only ones changed while the rest of the image is unaffected"
@@ -25,6 +26,21 @@
     ">
       ?
     </span>
+
+    <!-- Upscale button -->
+    <span *ngIf="supporter">
+      <p-button label="Upscale" (click)="this.submitJob(true)"></p-button>
+      <span class="ms-1 text-primary"
+        pTooltip="Upscale the image by 1.5x. This will make the image look better and generate finer details. Due to longer generation times, this feature is currently only available to supporters."
+        tooltipPosition="top" style="
+        background-color: rgba(255, 255, 255, 0.8);
+        padding: 2px 4px;
+        border-radius: 50%;
+        cursor: pointer;
+        ">
+        ?
+      </span>
+    </span>
   </div>
 
   <!-- Denoise strength -->
@@ -175,4 +191,11 @@
       </button>
     </div>
   </div>
+
+  <!-- <p-overlayPanel #op>
+    <ng-template pTemplate="content">
+        <h4>Custom Content</h4>
+    </ng-template>
+</p-overlayPanel> -->
+  <!-- <p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button> -->
 </div>

src/app/home/options/options.component.ts

@@ -55,6 +55,8 @@ export class OptionsComponent {
   API_URL: string = "";
   referenceImage?: MobiansImage;
   currentSeed?: number;
+  supporter: boolean = false;
+  serverMember: boolean = false;
 
   @Input() inpaintMask?: string;
 
@@ -98,6 +100,15 @@ export class OptionsComponent {
         this.referenceImage = undefined;
       }
     });
+
+    // Discord userdata check
+    this.sharedService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.supporter = userData.has_required_role;
+        this.serverMember = userData.is_member_of_your_guild;
+        console.log('premium member!');
+      }
+    });
   }
 
   ngOnDestroy() {
@@ -239,7 +250,11 @@ export class OptionsComponent {
   }
 
   // Send job to django api and retrieve job id.
-  submitJob() {
+  submitJob(upscale: boolean = false) {
+    if (upscale) {
+      this.generationRequest.job_type = "upscale";
+    }
+
     // Disable generation button
     this.enableGenerationButton = false;
 

src/app/shared.service.ts

@@ -10,6 +10,8 @@ export class SharedService {
   private _generationRequest: BehaviorSubject<GenerationRequest | null> = new BehaviorSubject<GenerationRequest | null>(null);
   private _images: BehaviorSubject<MobiansImage[]> = new BehaviorSubject<MobiansImage[]>([]);
   private _referenceImage: BehaviorSubject<MobiansImage | null> = new BehaviorSubject<MobiansImage | null>(null);
+  private _userData: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+
 
   constructor() { }
 
@@ -75,4 +77,17 @@ export class SharedService {
   getReferenceImageValue(): MobiansImage | null {
     return this._referenceImage.getValue();
   }
+
+  setUserData(value: any) {
+    this._userData.next(value);
+  }
+
+  getUserData(): Observable<any> {
+      return this._userData.asObservable();
+  }
+
+  getUserDataValue(): any {
+      return this._userData.getValue();
+  }
+
 }

src/app/stable-diffusion.service.ts

@@ -1,13 +1,13 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class StableDiffusionService {
-  // private apiBaseUrl =  'http://76.157.184.213:9000';
-  private apiBaseUrl =  'https://mobians.azurewebsites.net'
+  private apiBaseUrl =  environment.apiBaseUrl;
 
   constructor(private http: HttpClient) {}
 
@@ -31,4 +31,11 @@ export class StableDiffusionService {
     const body = JSON.stringify(data);
     return this.http.post(url, body, {'headers':headers});
   }
+
+  discordLogin(data: any): Observable<any> {
+    const url = `${this.apiBaseUrl}/discord_auth/`;  // note the trailing slash
+    const headers = { 'content-type': 'application/json' };
+    const body = JSON.stringify(data);
+    return this.http.post(url, body, {'headers':headers});
+  }
 }

src/environments/environment.prod.ts

@@ -0,0 +1,6 @@
+export const environment = {
+    production: true,
+    discordRedirectUri: 'https://mobians.ai/',  // Replace with your production redirect URI
+    apiBaseUrl: 'https://mobians.azurewebsites.net'
+  };
+

src/environments/environment.ts

@@ -0,0 +1,6 @@
+export const environment = {
+    production: false,
+    discordRedirectUri: 'http://localhost:4200/',  // Replace with your development redirect URI
+    apiBaseUrl: 'http://localhost:9000'
+  };
+

src/modules/home.module.ts

@@ -18,6 +18,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { ButtonModule } from 'primeng/button';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import { ToggleButtonModule } from 'primeng/togglebutton';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
     TooltipModule,
     ButtonModule,
     ColorPickerModule,
-    ToggleButtonModule
+    ToggleButtonModule,
+    OverlayPanelModule,
   ],
   exports: [
     ImageGridComponent,
@@ -47,6 +49,7 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
     ImageModalComponent,
     GligenDisplayComponent, 
     InpaintingDisplayComponent,
+    OverlayPanelModule,
   ],
   providers: [MessageService]
 })