| """ |
| 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 |
|
|
