| """ | |
| Embedding functionality for Norwegian RAG chatbot. | |
| Provides utilities for embedding the chatbot in external websites. | |
| """ | |
| import os | |
| from typing import Dict, Optional | |
| class EmbedGenerator: | |
| """ | |
| Generates embedding code for integrating the chatbot into external websites. | |
| """ | |
| def __init__( | |
| self, | |
| space_name: Optional[str] = None, | |
| username: Optional[str] = None, | |
| height: int = 500, | |
| width: str = "100%" | |
| ): | |
| """ | |
| Initialize the embed generator. | |
| Args: | |
| space_name: Hugging Face Space name | |
| username: Hugging Face username | |
| height: Default iframe height in pixels | |
| width: Default iframe width (can be pixels or percentage) | |
| """ | |
| self.space_name = space_name or "norwegian-rag-chatbot" | |
| self.username = username or "username" | |
| self.height = height | |
| self.width = width | |
| def get_iframe_code( | |
| self, | |
| height: Optional[int] = None, | |
| width: Optional[str] = None | |
| ) -> str: | |
| """ | |
| Generate iframe embed code. | |
| Args: | |
| height: Optional custom height | |
| width: Optional custom width | |
| Returns: | |
| HTML iframe code | |
| """ | |
| h = height or self.height | |
| w = width or self.width | |
| return f'<iframe src="https://huggingface.co/spaces/{self.username}/{self.space_name}" width="{w}" height="{h}px" frameborder="0"></iframe>' | |
| def get_javascript_widget_code(self) -> str: | |
| """ | |
| Generate JavaScript widget embed code. | |
| Returns: | |
| HTML script tag for widget | |
| """ | |
| return f'<script src="https://huggingface.co/spaces/{self.username}/{self.space_name}/widget.js"></script>' | |
| def get_direct_url(self) -> str: | |
| """ | |
| Get direct URL to the Hugging Face Space. | |
| Returns: | |
| URL to the Hugging Face Space | |
| """ | |
| return f"https://huggingface.co/spaces/{self.username}/{self.space_name}" | |
| def get_embed_options(self) -> Dict[str, str]: | |
| """ | |
| Get all embedding options. | |
| Returns: | |
| Dictionary of embedding options | |
| """ | |
| return { | |
| "iframe": self.get_iframe_code(), | |
| "javascript": self.get_javascript_widget_code(), | |
| "url": self.get_direct_url() | |
| } | |
| def update_space_info(self, username: str, space_name: str) -> None: | |
| """ | |
| Update Hugging Face Space information. | |
| Args: | |
| username: Hugging Face username | |
| space_name: Hugging Face Space name | |
| """ | |
| self.username = username | |
| self.space_name = space_name | |
| def create_embed_html_file( | |
| embed_generator: EmbedGenerator, | |
| output_path: str = "/home/ubuntu/chatbot_project/embed_example.html" | |
| ) -> str: | |
| """ | |
| Create an HTML file with embedding examples. | |
| Args: | |
| embed_generator: EmbedGenerator instance | |
| output_path: Path to save the HTML file | |
| Returns: | |
| Path to the created HTML file | |
| """ | |
| html_content = f"""<!DOCTYPE html> | |
| <html lang="no"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Norwegian RAG Chatbot - Embedding Examples</title> | |
| <style> | |
| body {{ | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| }} | |
| h1, h2, h3 {{ | |
| color: #2c3e50; | |
| }} | |
| .code-block {{ | |
| background-color: #f8f9fa; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| padding: 15px; | |
| margin: 15px 0; | |
| overflow-x: auto; | |
| }} | |
| .example {{ | |
| margin: 30px 0; | |
| padding: 20px; | |
| border: 1px solid #eee; | |
| border-radius: 5px; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Norwegian RAG Chatbot - Embedding Examples</h1> | |
| <p> | |
| This page demonstrates how to embed the Norwegian RAG Chatbot into your website. | |
| There are multiple ways to integrate the chatbot, depending on your needs. | |
| </p> | |
| <h2>Option 1: iFrame Embedding</h2> | |
| <p> | |
| The simplest way to embed the chatbot is using an iFrame. Copy and paste the following code into your HTML: | |
| </p> | |
| <div class="code-block"> | |
| <pre>{embed_generator.get_iframe_code()}</pre> | |
| </div> | |
| <div class="example"> | |
| <h3>Example:</h3> | |
| {embed_generator.get_iframe_code()} | |
| </div> | |
| <h2>Option 2: JavaScript Widget</h2> | |
| <p> | |
| For a more integrated experience, you can use the JavaScript widget. Copy and paste the following code into your HTML: | |
| </p> | |
| <div class="code-block"> | |
| <pre>{embed_generator.get_javascript_widget_code()}</pre> | |
| </div> | |
| <div class="example"> | |
| <h3>Example:</h3> | |
| <p>The widget will appear below once the page is hosted on a web server:</p> | |
| <!-- Widget will be inserted here when the script runs --> | |
| </div> | |
| <h2>Option 3: Direct Link</h2> | |
| <p> | |
| You can also provide a direct link to the chatbot: | |
| </p> | |
| <div class="code-block"> | |
| <pre>{embed_generator.get_direct_url()}</pre> | |
| </div> | |
| <h2>Customization</h2> | |
| <p> | |
| You can customize the appearance of the embedded chatbot by modifying the iFrame dimensions: | |
| </p> | |
| <div class="code-block"> | |
| <pre>{embed_generator.get_iframe_code(height=600, width="80%")}</pre> | |
| </div> | |
| <footer> | |
| <p> | |
| <small> | |
| Created with <a href="https://huggingface.co/" target="_blank">Hugging Face</a> and | |
| <a href="https://gradio.app/" target="_blank">Gradio</a>. | |
| </small> | |
| </p> | |
| </footer> | |
| </body> | |
| </html> | |
| """ | |
| with open(output_path, 'w', encoding='utf-8') as f: | |
| f.write(html_content) | |
| return output_path | |