feat: create assistant with gradio web component

sanchezcarlosjr · Nov 21, 2023 · 41cda2d · 41cda2d
1 parent 9698b19
commit 41cda2d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 8 deletions.
diff --git a/src/app/notebook/assistant/assistant.component.css b/src/app/notebook/assistant/assistant.component.css
@@ -15,9 +15,9 @@
 .chatbot {
   border: 0;
   position: fixed;
-  bottom: 4em;
+  bottom: 7em;
   right: 2em;
-  width: 30em;
-  height: 42em;
+  width: 32em;
+  height: 43em;
   z-index: 2;
 }
diff --git a/src/app/notebook/assistant/assistant.component.html b/src/app/notebook/assistant/assistant.component.html
@@ -1,2 +1,2 @@
 <img (click)="toggleChatbot()"  class="chatbot-toggle" ngSrc="../../../assets/avatar.png" alt="avatar.png" height="512" width="512">
-<iframe *ngIf="showChatbot" class="chatbot" src="https://evatutor.sanchezcarlosjr.com/"></iframe>
+<gradio-app *ngIf="showChatbot" info="false" class="chatbot" src="https://evatutor.sanchezcarlosjr.com/"></gradio-app>
diff --git a/src/app/notebook/assistant/assistant.component.ts b/src/app/notebook/assistant/assistant.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-assistant',

diff --git a/src/app/notebook/notebook.module.ts b/src/app/notebook/notebook.module.ts
@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 
 import {NotebookRoutingModule} from './notebook-routing.module';
@@ -61,7 +61,8 @@ import { AssistantComponent } from './assistant/assistant.component';
     MatRippleModule,
     MatRadioModule,
     NgOptimizedImage
-  ]
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class NotebookModule {
 }
diff --git a/src/index.html b/src/index.html
@@ -14,5 +14,7 @@
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
   <script defer src="https://cdn.jsdelivr.net/pyodide/v0.23.1/full/pyodide.js"></script>
+  <script defer type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.4.1/gradio.js"
+  ></script>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
@@ -32,6 +32,7 @@ main {
   display: block;
 }
 
+
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
@@ -842,4 +843,4 @@ py-config {
 /* Mermaid */
 [aria-roledescription="error"] {
   display: none;
-}
+}