description = '''
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">

<div style="font-family: 'Roboto Mono'; 'monospace'; font-weight: 400; line-height: 1.6; font-size: 18px;  text-align: justify;  text-justify: inter-word;">
The <strong>Linguistic Lens Application</strong> is an intelligent, user-friendly platform designed to bridge language barriers by combining Optical Character Recognition (OCR), translation, and text-to-speech (TTS) functionalities. Built with a combination of Gradio for the interface, <code>PaddleOCR</code> for text extraction, <code>GoogleTranslator</code> for translation, and <code>Google Text-to-Speech (gTTS)</code> for audio conversion, the application provides a seamless experience for users needing real-time text translation from images with audio playback support. Users start by uploading an image, which the system processes to extract text using PaddleOCR. This extracted text is then translated into a selected language via GoogleTranslator using the deep_translator library, supporting a wide array of global languages. The translated text is subsequently converted into audio using gTTS, allowing users to listen to the translation in the chosen language. This multi-component design enables a comprehensive service flow where user inputs are transformed into text, translated, and delivered as both written and spoken output, making the application a robust tool for users needing on-the-go linguistic assistance. By modularizing the OCR, translation, and TTS functions, the application ensures scalability, maintainability, and ease of integration with other services, making it an ideal solution for enhancing accessibility and communication in diverse, multilingual environments.
</div>
'''

usecase_diagram = """
<hr>
<p>To konw more about the project study the below UML diagrams:</p>
<h3 id="the-use-case-diagram-">The Use Case Diagram:</h3>
<p><img src="data:image/png;base64,{}" alt="usecase" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="1-actors-">1. <em>*Actors</em></h4>
<ul>
    <li><strong>User</strong>: Represents the end-user who interacts with the application by uploading images, initiating OCR, requesting translations, listening to audio, and clearing inputs.</li>
</ul>
<h4 id="2-main-application-linguistic-lens-application-">2. <strong>Main Application</strong>: &quot;Linguistic Lens Application&quot;</h4>
<ul>
    <li>The main component that consists of several use cases, each representing different functionalities in the application.</li>
</ul>
<h4 id="3-use-cases-">3. <strong>Use Cases</strong></h4>
<ul>
    <li><strong>Upload Image</strong>: The user uploads an image, triggering the OCR process to extract any text within it.</li>
    <li><strong>Perform OCR</strong>: The OCR functionality, handled by <code>OCR.py</code>, extracts text from the uploaded image.</li>
    <li><strong>Translate Text</strong>: The user can translate extracted text into a different language using <code>translate_speak.py</code>.</li>
    <li><strong>Play Translated Audio</strong>: Once the text is translated, the user can listen to it in the target language.</li>
    <li><strong>Clear Inputs</strong>: Resets all input fields, clearing any previously entered or extracted data.</li>
</ul>
<h4 id="4-translate_speak-py-component-">4. <strong>translate_speak.py Component</strong></h4>
<ul>
    <li><strong>Convert Text to Audio</strong>: Converts text to audio, either from the extracted OCR text or translated text.</li>
    <li><strong>Translate Text</strong>: Translates text from the source language to the user-selected target language.</li>
    <li><strong>Retrieve Supported Languages</strong>: Provides the list of supported languages for translation and text-to-speech, displayed in the UI dropdown.</li>
</ul>
<h4 id="5-ocr-py-component-">5. <strong>OCR.py Component</strong></h4>
<ul>
    <li><strong>Extract Text from Image</strong>: Extracts text from the uploaded image using PaddleOCR.</li>
</ul>
<h4 id="6-app-py-component-">6. <strong>app.py Component</strong></h4>
<ul>
    <li><strong>Display UI Components</strong>: Handles the visual elements of the application, such as image uploads, translation, and audio playback.</li>
    <li><strong>Handle User Interaction</strong>: Processes user actions, such as submitting an image for OCR, initiating a translation, or clearing inputs.</li>
</ul>
<h4 id="7-interactions-">7. <strong>Interactions</strong></h4>
<ul>
    <li><strong>User Interactions</strong>: Users initiate actions like uploading an image, starting OCR, requesting translation, and listening to audio.</li>
    <li><strong>System Interactions</strong>: Behind the scenes, <code>OCR.py</code> and <code>translate_speak.py</code> handle the core functionalities: text extraction, translation, and audio generation.</li>
</ul>
<hr>

"""

class_diagram= '''
<h3 id="explanation-of-the-class-diagram">Explanation of the Class Diagram</h3>
<p><img src="data:image/png;base64,{}" alt="class" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="1-classes-and-their-attributes-methods-">1. <strong>Classes and Their Attributes/Methods</strong></h4>
<ul>
    <li><p><strong>App</strong></p>
        <ul>
            <li><strong>Attributes</strong>:</li>
            <li><code>langs_list</code>: List of supported languages for translation.</li>
            <li><code>langs_dict</code>: Dictionary of supported languages with their language codes.</li>
            <li><code>main_interface</code>: The Gradio interface instance.</li>
        </ul>
    </li>
    <li><strong>Methods</strong>:<ul>
    <li><code>encode_image(image_path)</code>: Encodes an image file to a base64 string for display.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>OCR</strong></p>
<ul>
<li><strong>Methods</strong>:<ul>
<li><code>ocr_with_paddle(img)</code>: Uses PaddleOCR to perform OCR on an image and return extracted text and the audio path.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>TranslateSpeak</strong></p>
<ul>
<li><strong>Attributes</strong>:<ul>
<li><code>output_path</code>: Path where the output audio file is saved.</li>
<li><code>translate_path</code>: Path for the translated audio file.</li>
</ul>
</li>
<li><strong>Methods</strong>:<ul>
<li><code>get_lang(lang)</code>: Determines the appropriate language code for text-to-speech in the target language.</li>
<li><code>audio_streaming(txt, lang, to)</code>: Converts text to audio in the specified language, saving the result to a path determined by <code>to</code>.</li>
<li><code>translate_txt(lang, text)</code>: Translates text to the specified language and generates audio, returning the translated text and audio path.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>PaddleOCR</strong> (External Library Class)</p>
<ul>
<li><strong>Methods</strong>:<ul>
<li><code>ocr(img)</code>: Accepts an image input and returns OCR results, which <code>OCR</code> class uses in <code>ocr_with_paddle()</code>.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>GoogleTranslator</strong> (External Library Class)</p>
<ul>
<li><strong>Methods</strong>:<ul>
<li><code>get_supported_languages(as_dict)</code>: Returns a list or dictionary of supported languages, depending on the argument.</li>
<li><code>translate(text, source, target)</code>: Translates the given text from source to target language.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>gTTS</strong> (External Library Class)</p>
<ul>
<li><strong>Methods</strong>:<ul>
<li><code>save(output_path)</code>: Saves the generated audio to a specified path.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="2-relationships-and-interactions-">2. <strong>Relationships and Interactions</strong></h4>
<ul>
<li><strong>App</strong> uses the <strong>OCR</strong> and <strong>TranslateSpeak</strong> classes to provide OCR and translation functionalities within the Gradio UI.</li>
<li><strong>OCR</strong> interacts with the <strong>PaddleOCR</strong> library to perform OCR on user-uploaded images.</li>
<li><strong>TranslateSpeak</strong> relies on <strong>GoogleTranslator</strong> to translate text and <strong>gTTS</strong> to convert translated text to audio.</li>
</ul>
<hr>
'''

object_diagram = """
<h3 id="explanation-of-the-object-diagram">Explanation of the Object Diagram</h3>
<p><img src="data:image/png;base64,{}" alt="class" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="1-objects-and-their-attributes-">1. <strong>Objects and Their Attributes</strong></h4>
<ul>
<li><p><strong>app_instance</strong></p>
<ul>
<li><code>langs_list</code>: A list of language codes supported by the application, such as English (&quot;en&quot;), Spanish (&quot;es&quot;), and French (&quot;fr&quot;).</li>
<li><code>langs_dict</code>: A dictionary mapping language codes to their corresponding language names.</li>
<li><code>main_interface</code>: The main Gradio interface used for user interactions.</li>
</ul>
</li>
<li><p><strong>ocr_instance</strong></p>
<ul>
<li><code>finaltext</code>: Contains the extracted text from an uploaded image after OCR processing.</li>
</ul>
</li>
<li><p><strong>translate_speak_instance</strong></p>
<ul>
<li><code>output_path</code>: Path for saving the original audio output in WAV format.</li>
<li><code>translate_path</code>: Path for saving the translated audio in WAV format.</li>
</ul>
</li>
<li><p><strong>paddle_ocr_instance</strong></p>
<ul>
<li><code>language</code>: The language setting for OCR processing, defaulted to &quot;en&quot; (English).</li>
</ul>
</li>
<li><p><strong>google_translator_instance</strong></p>
<ul>
<li><code>source</code>: The source language code for translation, set to &quot;en&quot; (English).</li>
<li><code>target</code>: The target language code for translation, here set to &quot;es&quot; (Spanish).</li>
</ul>
</li>
<li><p><strong>gtts_instance</strong></p>
<ul>
<li><code>lang</code>: The language code for text-to-speech, set to &quot;en&quot; (English) in this example.</li>
<li><code>slow</code>: A boolean indicating the speed of the generated speech (false indicates normal speed).</li>
</ul>
</li>
</ul>
<h4 id="2-relationships-and-interactions-">2. <strong>Relationships and Interactions</strong></h4>
<ul>
<li><strong>app_instance</strong> interacts with <strong>ocr_instance</strong> to extract text from uploaded images using PaddleOCR.</li>
<li><strong>app_instance</strong> also interacts with <strong>translate_speak_instance</strong> for translating and generating audio from text.</li>
<li><strong>ocr_instance</strong> utilizes <strong>paddle_ocr_instance</strong> to perform the OCR process.</li>
<li><strong>translate_speak_instance</strong> communicates with <strong>google_translator_instance</strong> to translate text and uses <strong>gtts_instance</strong> to convert the translated text to audio.</li>
</ul>
<p id="each-object-in-this-diagram-represents-a-specific-instance-in-the-application-showcasing-how-the-components-work-together-to-provide-ocr-translation-and-audio-features-">Each object in this diagram represents a specific instance in the application, showcasing how the components work together to provide OCR, translation, and audio features.</p>
"""

sequence_diagram = '''
<h3 id="explanation-of-the-sequence-diagram">Explanation of the Sequence Diagram</h3>
<p><img src="data:image/png;base64,{}" alt="class" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="overview">Overview</h4>
<p>This sequence diagram illustrates how the components of the application interact during a typical workflow where a user uploads an image, the system extracts text from the image using OCR, translates the text into a different language, and finally generates audio from the translated text.</p>
<h4 id="sequence-of-events">Sequence of Events</h4>
<ol>
<li><p><strong>User Uploads an Image</strong>:</p>
<ul>
<li>The process begins when the <strong>User</strong> uploads an image to the application, which sends the image to the <strong>App</strong> component.</li>
</ul>
</li>
<li><p><strong>Performing OCR</strong>:</p>
<ul>
<li>The <strong>App</strong> calls the <code>ocr_with_paddle(image)</code> method from the <strong>OCR</strong> class to process the uploaded image.</li>
<li>The <strong>OCR</strong> class invokes the <code>ocr(image)</code> method of the <strong>PaddleOCR</strong> instance to extract text from the image.</li>
<li><strong>PaddleOCR</strong> performs the OCR operation and returns the extracted text to the <strong>OCR</strong> class.</li>
<li>The <strong>OCR</strong> class then returns the extracted text to the <strong>App</strong>.</li>
</ul>
</li>
<li><p><strong>Translating the Text</strong>:</p>
<ul>
<li>The <strong>App</strong> now calls the <code>translate_txt(lang, extractedText)</code> method from the <strong>TranslateSpeak</strong> class to translate the extracted text into the desired language.</li>
<li>The <strong>TranslateSpeak</strong> class invokes the <code>translate(extractedText, source, target)</code> method of the <strong>GoogleTranslator</strong> to perform the translation.</li>
<li><strong>GoogleTranslator</strong> returns the translated text to the <strong>TranslateSpeak</strong> class.</li>
</ul>
</li>
<li><p><strong>Generating Audio</strong>:</p>
<ul>
<li>The <strong>TranslateSpeak</strong> class then calls the <code>audio_streaming(translatedText, lang, to)</code> method of the <strong>gTTS</strong> class to generate audio from the translated text.</li>
<li>The <strong>gTTS</strong> class processes the text-to-speech operation and returns the audio path to the <strong>TranslateSpeak</strong> class.</li>
</ul>
</li>
<li><p><strong>Returning Results to the User</strong>:</p>
<ul>
<li>Finally, the <strong>TranslateSpeak</strong> class returns both the translated text and the audio path back to the <strong>App</strong>.</li>
<li>The <strong>App</strong> displays the translated text and provides an audio playback option for the user.</li>
</ul>
</li>
</ol>
<hr>
'''

colab_diagram = '''
<h3 id="explanation-of-the-collaboration-diagram">Explanation of the Collaboration Diagram</h3>
<p><img src="data:image/png;base64,{}" alt="class" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="overview">Overview</h4>
<p>The collaboration diagram illustrates how different components of the &quot;Linguistic Lens Application&quot; interact with each other to fulfill a particular user request, such as uploading an image, performing OCR, translating the text, and generating audio. This diagram focuses on the relationships and messages exchanged between the components rather than the chronological order of operations.</p>
<h4 id="interactions-between-components">Interactions Between Components</h4>
<ol>
<li><p><strong>User Uploads an Image</strong>:</p>
<ul>
<li>The interaction begins when the <strong>User</strong> uploads an image to the <strong>App</strong>.</li>
</ul>
</li>
<li><p><strong>OCR Processing</strong>:</p>
<ul>
<li>The <strong>App</strong> sends the uploaded image to the <strong>OCR</strong> component to process the image.</li>
<li>The <strong>OCR</strong> component invokes the <code>ocr(image)</code> method on the <strong>PaddleOCR</strong> component to extract text from the image.</li>
<li>The <strong>PaddleOCR</strong> processes the image and returns the extracted text back to the <strong>OCR</strong> component.</li>
<li>The <strong>OCR</strong> component then returns the extracted text to the <strong>App</strong>.</li>
</ul>
</li>
<li><p><strong>Translation of Text</strong>:</p>
<ul>
<li>The <strong>App</strong> then calls the <code>translate_txt(lang, extractedText)</code> method on the <strong>TranslateSpeak</strong> component, passing in the extracted text and the target language.</li>
<li>The <strong>TranslateSpeak</strong> component requests the translation from the <strong>GoogleTranslator</strong>, invoking the <code>translate(extractedText, source, target)</code> method.</li>
<li><strong>GoogleTranslator</strong> processes the request and returns the translated text back to the <strong>TranslateSpeak</strong> component.</li>
</ul>
</li>
<li><p><strong>Generating Audio from Translated Text</strong>:</p>
<ul>
<li>The <strong>TranslateSpeak</strong> component then calls the <code>audio_streaming(translatedText, lang, to)</code> method on the <strong>gTTS</strong> component to convert the translated text into audio.</li>
<li>The <strong>gTTS</strong> component processes the text-to-speech request and returns the audio file path back to the <strong>TranslateSpeak</strong> component.</li>
</ul>
</li>
<li><p><strong>Returning Results to the User</strong>:</p>
<ul>
<li>Finally, the <strong>TranslateSpeak</strong> component sends both the translated text and the audio path back to the <strong>App</strong>.</li>
<li>The <strong>App</strong> displays the translated text and provides an option for the <strong>User</strong> to play the audio.</li>
</ul>
</li>
</ol>
<h4 id="key-points">Key Points</h4>
<ul>
<li>The collaboration diagram emphasizes the connections and messages exchanged between components rather than the sequence of operations, showcasing how components work together to provide the application&#39;s functionalities.</li>
<li>Each component plays a crucial role in the workflow, facilitating the operations needed to fulfill user requests efficiently.</li>
</ul>
<p>This diagram helps in understanding the architecture of the application and the responsibilities of each component within the system. It is particularly useful for identifying how components are interrelated and how data flows through the application.</p>
<hr>
'''

component_diagram= '''
<h3 id="explanation-of-the-component-diagram">Explanation of the Component Diagram</h3>
<p><img src="data:image/png;base64,{}" alt="class" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="overview">Overview</h4>
<p>The component diagram illustrates the architecture of the &quot;Linguistic Lens Application&quot; by showing the major components, their roles, and the relationships between them. This diagram helps in understanding how the system is structured and how each part contributes to the overall functionality.</p>
<h4 id="components-and-their-responsibilities">Components and Their Responsibilities</h4>
<ol>
<li><p><strong>App</strong>:</p>
<ul>
<li><strong>Type</strong>: Component</li>
<li><strong>Responsibilities</strong>:<ul>
<li>Acts as the main interface for the user, handling interactions and orchestrating the workflow of the application.</li>
<li>Manages user input, such as image uploads and language selections.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>OCR</strong>:</p>
<ul>
<li><strong>Type</strong>: Component</li>
<li><strong>Responsibilities</strong>:<ul>
<li>Responsible for performing Optical Character Recognition on uploaded images.</li>
<li>Invokes the <strong>PaddleOCR</strong> component to extract text from images.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>TranslateSpeak</strong>:</p>
<ul>
<li><strong>Type</strong>: Component</li>
<li><strong>Responsibilities</strong>:<ul>
<li>Handles the translation of text extracted by the <strong>OCR</strong> component.</li>
<li>Converts both the original and translated text into audio using the <strong>gTTS</strong> component.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>PaddleOCR</strong>:</p>
<ul>
<li><strong>Type</strong>: Component</li>
<li><strong>Responsibilities</strong>:<ul>
<li>An external library component responsible for executing OCR to extract text from images.</li>
<li>Provides methods to process images and return recognized text.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>GoogleTranslator</strong>:</p>
<ul>
<li><strong>Type</strong>: Component</li>
<li><strong>Responsibilities</strong>:<ul>
<li>Translates text from one language to another using Google&#39;s translation.</li>
<li>Provides access to a list of supported languages.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>gTTS (Google Text-to-Speech)</strong>:</p>
<ul>
<li><strong>Type</strong>: Component</li>
<li><strong>Responsibilities</strong>:<ul>
<li>Converts text to speech using Google&#39;s text-to-speech.</li>
<li>Saves the generated audio files for playback.</li>
</ul>
</li>
</ul>
</li>
</ol>
<h4 id="relationships">Relationships</h4>
<ul>
<li>The <strong>App</strong> component interacts with both the <strong>OCR</strong> and <strong>TranslateSpeak</strong> components to facilitate the application’s main functionalities.</li>
<li>The <strong>OCR</strong> component relies on the <strong>PaddleOCR</strong> library for text extraction.</li>
<li>The <strong>TranslateSpeak</strong> component uses <strong>GoogleTranslator</strong> for translation tasks and <strong>gTTS</strong> for generating audio output from the text.</li>
</ul>
<p>This component diagram provides a high-level view of the application’s architecture, highlighting how different components work together to deliver the desired functionality. It helps stakeholders understand the modular structure and promotes better maintenance and scalability.</p>
<hr>
'''

activity_diagram = '''
<h3 id="explanation-of-the-activity-diagram">Explanation of the Activity Diagram</h3>
<p><img src="data:image/png;base64,{}" alt="class" width="500" height="500" style="display: block; margin-right: 40px;"></p>
<h4 id="overview">Overview</h4>
<p>The activity diagram illustrates the flow of activities in the &quot;Linguistic Lens Application&quot; from the moment the user uploads an image to the final display of translated text and audio playback. This diagram is useful for visualizing the dynamic behavior of the system and understanding how different processes interact.</p>
<h4 id="activity-flow">Activity Flow</h4>
<ol>
<li><p><strong>User Uploads Image</strong>:</p>
<ul>
<li>The process begins with the <strong>User</strong> uploading an image.</li>
</ul>
</li>
<li><p><strong>App Receives Image</strong>:</p>
<ul>
<li>The <strong>App</strong> component receives the uploaded image from the user.</li>
</ul>
</li>
<li><p><strong>OCR Processing</strong>:</p>
<ul>
<li>The <strong>App</strong> calls the <code>ocr_with_paddle(image)</code> method from the <strong>OCR</strong> component.</li>
<li>The <strong>OCR</strong> component extracts text from the image by invoking the <strong>PaddleOCR</strong> component to perform OCR.</li>
</ul>
</li>
<li><p><strong>PaddleOCR Performs OCR</strong>:</p>
<ul>
<li>The <strong>PaddleOCR</strong> processes the image and returns the extracted text back to the <strong>OCR</strong> component.</li>
</ul>
</li>
<li><p><strong>OCR Returns Extracted Text</strong>:</p>
<ul>
<li>The <strong>OCR</strong> component sends the extracted text back to the <strong>App</strong>.</li>
</ul>
</li>
<li><p><strong>App Displays Extracted Text</strong>:</p>
<ul>
<li>The <strong>App</strong> displays the extracted text for the user to see.</li>
</ul>
</li>
<li><p><strong>User Selects Target Language</strong>:</p>
<ul>
<li>The <strong>User</strong> selects a target language for translation.</li>
</ul>
</li>
<li><p><strong>App Calls Translate Function</strong>:</p>
<ul>
<li>The <strong>App</strong> calls the <code>translate_txt(lang, extractedText)</code> method from the <strong>TranslateSpeak</strong> component to translate the extracted text.</li>
</ul>
</li>
<li><p><strong>TranslateSpeak Calls GoogleTranslator</strong>:</p>
<ul>
<li>The <strong>TranslateSpeak</strong> component invokes the <strong>GoogleTranslator</strong> to translate the extracted text into the selected language.</li>
</ul>
</li>
<li><p><strong>GoogleTranslator Returns Translated Text</strong>:</p>
<ul>
<li>The <strong>GoogleTranslator</strong> processes the request and returns the translated text back to the <strong>TranslateSpeak</strong> component.</li>
</ul>
</li>
<li><p><strong>TranslateSpeak Calls gTTS for Audio Generation</strong>:</p>
<ul>
<li>The <strong>TranslateSpeak</strong> component calls the <strong>gTTS</strong> component to generate audio from the translated text.</li>
</ul>
</li>
<li><p><strong>gTTS Returns Audio Path</strong>:</p>
<ul>
<li>The <strong>gTTS</strong> component processes the text-to-speech request and returns the audio file path to the <strong>TranslateSpeak</strong> component.</li>
</ul>
</li>
<li><p><strong>TranslateSpeak Returns Results to App</strong>:</p>
<ul>
<li>The <strong>TranslateSpeak</strong> component sends both the translated text and the audio path back to the <strong>App</strong>.</li>
</ul>
</li>
<li><p><strong>App Displays Translated Text and Provides Audio Playback</strong>:</p>
<ul>
<li>Finally, the <strong>App</strong> displays the translated text and provides an option for the user to play the audio.</li>
</ul>
</li>
</ol>
<h4 id="key-points">Key Points</h4>
<ul>
<li>This activity diagram provides a clear representation of the workflow within the application, making it easy to follow the sequence of operations.</li>
<li>It highlights the interactions between the user and the application, as well as between the various components involved in processing the user&#39;s request.</li>
</ul>
<p>This diagram is beneficial for stakeholders and developers to understand the application&#39;s flow, facilitating better communication and ensuring a smoother development process.</p>
<hr>
'''

footer = """
            <div style="background-color: #333; color: white; padding: 10px; width: 100%; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: .2rem 35px; box-sizing: border-box; font-size: 16px;">
                <div style="text-align: left;">
                    <p style="margin: 0;">&copy; 2024 </p>
                </div>
                <div style="text-align: center; flex-grow: 1;">
                    <p style="margin: 0;">This website is made with ❤ by SARATH CHANDRA</p>
                </div>
                <div class="social-links" style="display: flex; gap: 20px; justify-content: flex-end; align-items: center;">
                    <a href="https://github.com/21bq1a4210" target="_blank" style="text-align: center;">
                        <img src="data:image/png;base64,{}" alt="GitHub" width="40" height="40" style="display: block; margin: 0 auto;">
                        <span style="font-size: 14px;">GitHub</span>
                    </a>
                    <a href="https://www.linkedin.com/in/sarath-chandra-bandreddi-07393b1aa/" target="_blank" style="text-align: center;">
                        <img src="data:image/png;base64,{}" alt="LinkedIn" width="40" height="40" style="display: block; margin: 0 auto;">
                        <span style="font-size: 14px;">LinkedIn</span>
                    </a>
                    <a href="https://21bq1a4210.github.io/MyPortfolio-/" target="_blank" style="text-align: center;">
                        <img src="data:image/png;base64,{}" alt="Portfolio" width="40" height="40" style="display: block; margin-right: 40px;">
                        <span style="font-size: 14px;">Portfolio</span>
                    </a>
                </div>
            </div>
        """