fix: improve UI (#24)

Author: Hitesh-Kandpal

.gitignore

@@ -16,3 +16,4 @@
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+*dump.rdb

apps/api/.env.example

@@ -1,25 +1,25 @@
 # Server
-SERVER_PORT=
+SERVER_PORT=3000
 
 # Node env
-NODE_ENV= # Use "development" for graphql playground to work
+NODE_ENV=development # Use "development" for graphql playground to work
 
 # Upload folder location
-UPLOAD_FOLDER_PATH= # Use uploads/ as upload folder path
+UPLOAD_FOLDER_PATH= # If not present will use "uploads" folder in the root cwd
 
 # Database configuration
 DB_TYPE=
-DB_HOST=
+DB_HOST=transcript-summarizer-mariadb
 DB_PORT=
 DB_USERNAME=
 DB_PASSWORD=
 DB_NAME=
 MARIADB_DOCKER_PORT= 3307
 
 # Redis configuration
-REDIS_HOST=
-REDIS_PORT=
-REDIS_DOCKER_PORT=6397
+DB_HOST=transcript-summarizer-redis
+REDIS_PORT=6379
+REDIS_DOCKER_PORT=6379
 
 OPENAI_API_KEY="sk-your api key"
 GPT_MODEL="gpt-4o"

apps/api/src/jobs/consumers/summary/summary.consumer.ts

@@ -47,7 +47,9 @@ export class SummaryConsumer {
 
       this.logger.log(`Generating summary for job with ID: ${jobId}`);
       const summaryText = await this.meetingSummarizerService.generateMeetingSummary(fileContent);
-      summary.outputText = summaryText;
+      summary.outputText =
+        summaryText ||
+        'Summary could not be generated, please check if its a valid teams transcript file';
       // Update job status to SUCCESS
       summary.jobStatus = JobStatus.SUCCESS;
       this.logger.log(`Summary generated successfully for job with ID: ${jobId}`);

apps/api/src/modules/summary/summary.service.ts

@@ -12,12 +12,7 @@ import { SummaryResponse } from './dto/summary-response.dto';
 import { v4 as uuidv4 } from 'uuid';
 import { SummaryQueueProducer } from 'src/jobs/producers/summary/summary.producer';
 import * as fs from 'fs-extra';
-import { ConfigService } from '@nestjs/config';
-import { config } from 'dotenv';
-
-config();
-
-const configService = new ConfigService();
+import { uploadDir } from 'src/main';
 
 @Injectable()
 export class SummaryService extends CoreService<Summary> {
@@ -40,18 +35,15 @@ export class SummaryService extends CoreService<Summary> {
 
       const uniqueIdentifier = uuidv4().replace(/-/g, '').substring(0, 10);
       const modifiedFilename = `${uniqueIdentifier}_${filename}`;
-      const uploadPath = configService.get('UPLOAD_FOLDER_PATH')?.replace(/[^\w\s/]/g, '') ?? null;
-
-      const uploadFolder = join(process.cwd(), 'uploads');
 
-      if (uploadPath) {
-        const absoluteUploadPath = resolve(uploadPath);
+      if (uploadDir) {
+        const absoluteUploadPath = resolve(uploadDir);
         await fs.ensureDir(absoluteUploadPath);
       } else {
-        await fs.ensureDir(uploadFolder);
+        await fs.ensureDir(uploadDir);
       }
 
-      const fileLocation = join(uploadPath || uploadFolder, modifiedFilename);
+      const fileLocation = join(uploadDir, modifiedFilename);
 
       return new Promise((resolve, reject) => {
         createReadStream()

apps/portal/src/app/app.component.html

@@ -1,2 +1,5 @@
+<h1 class="mt-4 mb-6 text-center text-cyan-400 text-5xl font-semibold">
+  {{ 'COMMON.TITLE' | translate }}
+</h1>
 <router-outlet></router-outlet>
 <p-toast key="tst"></p-toast>

apps/portal/src/app/features/file-processor/file-processor.component.scss

@@ -1,5 +1,5 @@
 .table-container {
-  max-height: 400px;
+  max-height: 350px;
   overflow-y: auto;
 }
 

apps/portal/src/app/features/file-processor/file-processor.component.ts

@@ -134,7 +134,7 @@ export class FileProcessorComponent implements OnInit, OnDestroy {
   downloadFile(summary: string | null | undefined, fileName: string): void {
     if (summary !== undefined && summary !== null) {
       const blob = new Blob([summary], { type: 'text/markdown' });
-      FileSaver.saveAs(blob, `${fileName}.md`);
+      FileSaver.saveAs(blob, `${fileName.replace(/\.(txt|vtt)$/i, '')}.md`);
     }
   }
 }

apps/portal/src/app/features/file.service.ts

@@ -21,7 +21,6 @@ export class FileService {
 
   updateJobIds(jobId: number): void {
     const jobIds = [...this.jobIdsSubject.value, jobId];
-
     sessionStorage.setItem('jobIds', JSON.stringify(jobIds));
     this.jobIdsSubject.next(jobIds);
   }

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html

@@ -1,22 +1,26 @@
 <div class="main flex justify-content-center mt-5">
-  <div class="transcript-analyzer">
-    <div class="buttons flex flex-column align-items-center mb-3">
-      <input
-        type="file"
-        #fileInput
-        style="display: none"
-        (change)="onFileSelected($event)"
-        accept=".vtt,.txt"
-      />
-      <p-button (click)="fileInput.click()" severity="success">{{
-        'TRANSCRIPT.BUTTONS.UPLOAD' | translate
-      }}</p-button>
-      <span *ngIf="selectedFileName" class="file-name text-base">{{ selectedFileName }}</span>
-      <span *ngIf="limitError" class="error">{{ 'TRANSCRIPT.ERRORS.FILE_SIZE' | translate }}</span>
-      <span *ngIf="invalidTypeError" class="error">{{
-        'TRANSCRIPT.ERRORS.FILE_TYPE' | translate
-      }}</span>
-      <p-button (click)="summarizeTranscript()">{{
+  <div class="transcript-analyzer mt-3 p-6 border-round-xl">
+    <p-fileUpload
+      name="file"
+      [url]="''"
+      accept=".vtt,.txt"
+      (onSelect)="onFileSelected($event)"
+      (onUpload)="onFileSelected($event)"
+      [maxFileSize]="maxFileSize"
+      (onRemove)="onRemove()"
+      [showCancelButton]="false"
+      [showUploadButton]="false"
+      chooseLabel="{{ 'TRANSCRIPT.BUTTONS.CHOOSE' | translate }}"
+      styleClass="mb-2 text-center"
+    ></p-fileUpload>
+    <p-messages severity="info" styleClass="mb-5">
+      <ng-template pTemplate class="flex justify-content-between">
+        <div>{{ 'TRANSCRIPT.UPLOAD_INFO.ACCEPTED_FILE' | translate }}</div>
+        <div class="ml-5">{{ 'TRANSCRIPT.UPLOAD_INFO.MAX_FILE_SIZE' | translate }}</div>
+      </ng-template>
+    </p-messages>
+    <div class="flex flex-column align-items-center mt-3 mb-3">
+      <p-button (click)="summarizeTranscript()" [disabled]="!selectedFile" severity="success">{{
         'TRANSCRIPT.BUTTONS.SUMMARIZE' | translate
       }}</p-button>
     </div>

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.scss

@@ -4,22 +4,26 @@ body {
   height: 90vh;
 
   .transcript-analyzer {
-    @include styleclass('flex flex-column justify-content-center align-items-center relative p-6 border-round-xl');
     border: 3px solid #4d4dff;
     box-shadow: 0 4px 9px rgba(0, 0, 0, 0.9);
+  }
 
-    button {
-      margin: 30px 0;
+  .p-fileupload {
+    .p-fileupload-filename {
+      width: 200px;
     }
+  }
 
-    .file-name {
-      bottom: 70%;
-      color: #333;
-    }
+  .p-fileupload-content{
+    padding: 32px;
+  }
+
+  .p-message-error{
+    margin-bottom: 0;
   }
 
-  .error {
-    bottom: 70%;
-    color: red;
+  .p-message-wrapper{
+    display: flex;
+    justify-content: space-around;
   }
 }

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.ts

@@ -19,51 +19,27 @@ export class TranscriptAnalyzerComponent {
     this.translate.setDefaultLang('en');
   }
 
-  fileType = '';
-
-  limitError = false;
-
-  invalidTypeError = false;
-
   maxFileSize: number = 10 * 1024 * 1024; // 10 MB
 
-  selectedFileName = '';
-
   selectedFile: File | null = null;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onFileSelected(event: any): void {
-    const file: File = event.target.files[0];
+    const { files } = event.originalEvent.target;
+    const file: File = files[0];
 
     if (file) {
-      if (!this.isValidFileType(file)) {
-        this.limitError = false;
-        this.invalidTypeError = true;
-        this.selectedFileName = '';
-        this.selectedFile = null;
-      } else if (!this.isValidFileSize(file)) {
-        this.invalidTypeError = false;
-        this.limitError = true;
-        this.selectedFileName = '';
-        this.selectedFile = null;
-      } else {
-        this.selectedFileName = file.name;
-        this.limitError = false;
-        this.invalidTypeError = false;
-        this.selectedFile = file;
-      }
+      this.selectedFile = file;
     }
   }
 
-  isValidFileType(file: File): boolean {
-    this.fileType = file.type;
-    return this.fileType === 'text/plain' || this.fileType === 'text/vtt';
+  onClear(): void {
+    this.selectedFile = null;
   }
 
-  isValidFileSize(file: File): boolean {
-    return file.size <= this.maxFileSize;
+  onRemove(): void {
+    this.selectedFile = null;
   }
-
   // eslint-disable-next-line
   summarizeTranscript(): void {
     // eslint-disable-next-line

apps/portal/src/assets/i18n/en.json

@@ -1,16 +1,24 @@
 {
+  "COMMON": {
+    "TITLE": "Transcript Summarizer"
+  },
   "ERRORS": {
     "UNHANDLED_ERROR": "Something went wrong",
     "API_ERROR": "Something went wrong while fetching data"
   },
   "TRANSCRIPT": {
+    "UPLOAD_INFO": {
+      "ACCEPTED_FILE": "Accepted File: .vtt, .txt",
+      "MAX_FILE_SIZE": "Max File Size: 10.00MB"
+    },
     "ERRORS": {
       "FILE_TYPE": "Please upload a VTT or TXT file only.",
       "FILE_SIZE": "File size should not exceed 10 MB.",
       "NO_FILE": "Please select a file.",
       "FILE_UPLOAD": "File upload failed. Please try again."
     },
     "BUTTONS": {
+      "CHOOSE": "Choose File",
       "UPLOAD": "Upload File",
       "SUMMARIZE": "Summarize Me"
     }

apps/portal/src/index.html

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Portal</title>
+  <title>Transcript Summarizer</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">