Spaces:

viswadarshan06
/

Thirukkural_AI_Backend

Sleeping

App Files Files Community

viswadarshan06 commited on Aug 18

Commit

221f743

verified ·

1 Parent(s): 19179a4

Upload index.html

Browse files

Files changed (1) hide show

index.html +583 -0

index.html ADDED Viewed

	@@ -0,0 +1,583 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Thirukkural Wisdom</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: "Poppins", sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        color: #333;
+        line-height: 1.6;
+      }
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      /* Header */
+      .header {
+        text-align: center;
+        margin-bottom: 40px;
+        padding: 30px 0;
+      }
+      .header h1 {
+        color: white;
+        font-size: 2.5rem;
+        font-weight: 600;
+        margin-bottom: 10px;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      }
+      .header p {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 1.1rem;
+        font-weight: 300;
+      }
+      /* Search Section */
+      .search-section {
+        background: white;
+        border-radius: 20px;
+        padding: 30px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        margin-bottom: 30px;
+      }
+      .search-form {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .input-group label {
+        font-weight: 500;
+        color: #555;
+        font-size: 0.95rem;
+      }
+      .query-input {
+        padding: 15px 20px;
+        border: 2px solid #e0e6ff;
+        border-radius: 12px;
+        font-size: 1rem;
+        transition: all 0.3s ease;
+        font-family: "Poppins", sans-serif;
+        background: #fafbff;
+      }
+      .query-input:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        background: white;
+      }
+      .form-row {
+        display: flex;
+        gap: 20px;
+        align-items: end;
+      }
+      .language-selector {
+        flex: 1;
+      }
+      .language-selector select {
+        padding: 12px 15px;
+        border: 2px solid #e0e6ff;
+        border-radius: 12px;
+        font-size: 1rem;
+        font-family: "Poppins", sans-serif;
+        background: #fafbff;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+      .language-selector select:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        background: white;
+      }
+      .search-button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 15px 30px;
+        border-radius: 12px;
+        font-size: 1.1rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-family: "Poppins", sans-serif;
+        min-width: 180px;
+      }
+      .search-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+      }
+      .search-button:active {
+        transform: translateY(0);
+      }
+      .search-button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none;
+      }
+      /* Loading State */
+      .loading {
+        text-align: center;
+        padding: 40px;
+        color: #667eea;
+      }
+      .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 4px solid #e0e6ff;
+        border-top: 4px solid #667eea;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 0 auto 15px;
+      }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      /* Results Section */
+      .results-section {
+        display: none;
+      }
+      .results-section.show {
+        display: block;
+      }
+      /* Explanation Card */
+      .explanation-card {
+        background: white;
+        border-radius: 20px;
+        padding: 30px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        margin-bottom: 30px;
+        border-left: 5px solid #667eea;
+      }
+      .explanation-card h3 {
+        color: #333;
+        font-size: 1.3rem;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .explanation-text {
+        color: #555;
+        font-size: 1rem;
+        line-height: 1.7;
+      }
+      .explanation-text p {
+        margin-bottom: 15px;
+      }
+      .explanation-text strong {
+        color: #333;
+      }
+      .explanation-text ul,
+      .explanation-text ol {
+        padding-left: 20px;
+        margin-bottom: 15px;
+      }
+      .explanation-text li {
+        margin-bottom: 5px;
+      }
+      /* Kural Cards */
+      .kurals-container {
+        display: grid;
+        gap: 20px;
+      }
+      .kural-card {
+        background: white;
+        border-radius: 15px;
+        padding: 25px;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+        transition: all 0.3s ease;
+        border: 1px solid #f0f0f0;
+      }
+      .kural-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+      }
+      .kural-number {
+        display: inline-block;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 5px 12px;
+        border-radius: 20px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        margin-bottom: 15px;
+      }
+      .kural-tamil {
+        font-family: "Noto Sans Tamil", sans-serif;
+        font-size: 1.2rem;
+        line-height: 1.8;
+        color: #2c3e50;
+        margin-bottom: 15px;
+        font-weight: 500;
+        text-align: center;
+        background: #f8f9ff;
+        padding: 15px;
+        border-radius: 10px;
+        white-space: pre-line;
+      }
+      .kural-english {
+        font-size: 1rem;
+        color: #555;
+        font-style: italic;
+        text-align: center;
+        margin-bottom: 15px;
+        line-height: 1.6;
+      }
+      .kural-category {
+        display: inline-block;
+        background: #e8f2ff;
+        color: #667eea;
+        padding: 4px 10px;
+        border-radius: 15px;
+        font-size: 0.8rem;
+        font-weight: 500;
+      }
+      .kural-explanation {
+        margin-top: 15px;
+        padding-top: 15px;
+        border-top: 1px solid #f0f0f0;
+        color: #666;
+        font-size: 0.9rem;
+        line-height: 1.6;
+      }
+      /* Error State */
+      .error-message {
+        background: #fff5f5;
+        border: 1px solid #fed7d7;
+        border-radius: 12px;
+        padding: 20px;
+        color: #c53030;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+      /* Responsive Design */
+      @media (max-width: 768px) {
+        .container {
+          padding: 15px;
+        }
+        .header h1 {
+          font-size: 2rem;
+        }
+        .search-section {
+          padding: 20px;
+        }
+        .form-row {
+          flex-direction: column;
+          gap: 15px;
+        }
+        .search-button {
+          width: 100%;
+        }
+        .explanation-card,
+        .kural-card {
+          padding: 20px;
+        }
+        .kural-tamil {
+          font-size: 1.1rem;
+        }
+      }
+      /* Hidden elements for future features */
+      .action-buttons {
+        display: none;
+        gap: 10px;
+        margin-top: 15px;
+      }
+      .action-btn {
+        padding: 8px 15px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        background: white;
+        cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.3s ease;
+      }
+      .action-btn:hover {
+        background: #f5f5f5;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <!-- Header -->
+      <div class="header">
+        <h1>திருக்குறள் Wisdom</h1>
+        <p>Discover timeless guidance from Thiruvalluvar's sacred verses</p>
+      </div>
+      <!-- Search Section -->
+      <div class="search-section">
+        <form class="search-form" id="searchForm">
+          <div class="input-group">
+            <label for="query">What guidance are you seeking?</label>
+            <textarea
+              id="query"
+              class="query-input"
+              placeholder="e.g., I want to be happy in my life, How to be a good leader, What is true friendship..."
+              rows="3"
+              required
+            ></textarea>
+          </div>
+          <div class="form-row">
+            <div class="language-selector">
+              <label for="language">Language Preference</label>
+              <select id="language" name="language">
+                <option value="en">English</option>
+                <option value="ta">தமிழ்</option>
+              </select>
+            </div>
+            <button type="submit" class="search-button">✨ Find Wisdom</button>
+          </div>
+        </form>
+      </div>
+      <!-- Loading State -->
+      <div id="loading" class="loading" style="display: none">
+        <div class="loading-spinner"></div>
+        <p>Searching ancient wisdom...</p>
+      </div>
+      <!-- Error Message -->
+      <div id="errorMessage" class="error-message" style="display: none"></div>
+      <!-- Results Section -->
+      <div id="resultsSection" class="results-section">
+        <!-- Explanation Card -->
+        <div id="explanationCard" class="explanation-card">
+          <h3>🧘 Answer to Reflect On</h3>
+          <div id="explanationText" class="explanation-text"></div>
+        </div>
+        <!-- Kurals Container -->
+        <div id="kuralsContainer" class="kurals-container"></div>
+      </div>
+    </div>
+    <script>
+      // Get form elements
+      const searchForm = document.getElementById("searchForm");
+      const queryInput = document.getElementById("query");
+      const languageSelect = document.getElementById("language");
+      const searchButton = document.querySelector(".search-button");
+      const loading = document.getElementById("loading");
+      const errorMessage = document.getElementById("errorMessage");
+      const resultsSection = document.getElementById("resultsSection");
+      const explanationText = document.getElementById("explanationText");
+      const kuralsContainer = document.getElementById("kuralsContainer");
+      // API configuration - Update this with your actual API endpoint
+      const API_BASE_URL =
+        "https://viswadarshan06-Thirukkural-AI-Backend.hf.space"; // Replace with your actual API URL
+      // Handle form submission
+      searchForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const query = queryInput.value.trim();
+        if (!query) return;
+        // Show loading state
+        showLoading();
+        hideError();
+        hideResults();
+        try {
+          // Make API call
+          const response = await fetch(`${API_BASE_URL}/search/`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              query: query,
+              lang: languageSelect.value,
+              top_k: 3,
+            }),
+          });
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          const data = await response.json();
+          displayResults(data);
+        } catch (error) {
+          console.error("Search error:", error);
+          showError(
+            "Unable to search for wisdom at this time. Please try again later."
+          );
+        } finally {
+          hideLoading();
+        }
+      });
+      function showLoading() {
+        loading.style.display = "block";
+        searchButton.disabled = true;
+      }
+      function hideLoading() {
+        loading.style.display = "none";
+        searchButton.disabled = false;
+      }
+      function showError(message) {
+        errorMessage.textContent = message;
+        errorMessage.style.display = "block";
+      }
+      function hideError() {
+        errorMessage.style.display = "none";
+      }
+      function hideResults() {
+        resultsSection.classList.remove("show");
+      }
+      function showResults() {
+        resultsSection.classList.add("show");
+      }
+      function displayResults(data) {
+        // Display explanation (handle markdown formatting)
+        explanationText.innerHTML = formatMarkdown(data.explanation);
+        // Display kurals
+        kuralsContainer.innerHTML = "";
+        data.matched_kurals.forEach((kural) => {
+          const kuralCard = createKuralCard(kural);
+          kuralsContainer.appendChild(kuralCard);
+        });
+        showResults();
+      }
+      function createKuralCard(kural) {
+        const card = document.createElement("div");
+        card.className = "kural-card";
+        // Format Tamil text with proper line breaks
+        const tamilText = kural.Tamil
+          ? kural.Tamil.replace(/\n/g, "\n")
+          : "Tamil text not available";
+        card.innerHTML = `
+                <div class="kural-number">Kural ${kural.Number}</div>
+                <div class="kural-tamil">${tamilText}</div>
+                <div class="kural-english">${
+                  kural.English || "English translation not available"
+                }</div>
+                <div class="kural-category">${kural.Category || "General"}</div>
+                ${
+                  kural.Explanation
+                    ? `<div class="kural-explanation">${kural.Explanation}</div>`
+                    : ""
+                }
+                <!-- Hidden action buttons for future features -->
+                <div class="action-buttons">
+                    <button class="action-btn">📋 Copy</button>
+                    <button class="action-btn">🔊 Speak</button>
+                    <button class="action-btn">💾 Save</button>
+                </div>
+            `;
+        return card;
+      }
+      function formatMarkdown(text) {
+        if (!text) return "";
+        // Simple markdown formatting
+        return text
+          .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+          .replace(/\*(.*?)\*/g, "<em>$1</em>")
+          .replace(/^- (.+)$/gm, "<li>$1</li>")
+          .replace(/(<li>.*<\/li>)/s, "<ul>$1</ul>")
+          .replace(/^\d+\. (.+)$/gm, "<li>$1</li>")
+          .replace(/(<li>.*<\/li>)/s, "<ol>$1</ol>")
+          .replace(/\n\n/g, "</p><p>")
+          .replace(/^(.+)$/, "<p>$1</p>")
+          .replace(/<p><\/p>/g, "");
+      }
+      // Auto-resize textarea
+      queryInput.addEventListener("input", function () {
+        this.style.height = "auto";
+        this.style.height = this.scrollHeight + "px";
+      });
+    </script>
+  </body>
+</html>