Upload 4 files

Dockerfile

@@ -0,0 +1,15 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /code
+
+# Copy the requirements file and install dependencies
+COPY requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Command to run the application using gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,150 @@
+import os
+import requests
+from flask import Flask, render_template, request, jsonify
+from groq import Groq
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+# Tell Flask that the template folder is the current directory ('.')
+app = Flask(__name__, template_folder='.')
+
+# --- Configuration ---
+try:
+    groq_client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
+except Exception as e:
+    print(f"Error initializing Groq client: {e}")
+    groq_client = None
+
+# API for Tafsir (Commentary)
+TAFSIR_API_BASE_URL = "https://cdn.jsdelivr.net/gh/spa5k/tafsir_api@main/tafsir"
+TAFSIR_SOURCES = {
+    "context": "en-kashf-al-asrar-tafsir",
+    "classical": "en-tafisr-ibn-kathir",
+    "modern": "en-tafsir-maarif-ul-quran"
+}
+DATA_UNAVAILABLE_MESSAGE = "Information from this source is currently unavailable or not found for this verse."
+
+# API for Quran Text and Translation
+QURAN_API_BASE_URL = "http://api.alquran.cloud/v1/ayah"
+
+def get_ayah_text(surah: int, ayah: int) -> str:
+    """Fetches the English translation of a specific ayah."""
+    url = f"{QURAN_API_BASE_URL}/{surah}:{ayah}/en.asad"
+    try:
+        response = requests.get(url, timeout=10)
+        response.raise_for_status()
+        data = response.json()
+        if data.get('code') == 200 and data.get('data', {}).get('text'):
+            return data['data']['text']
+        else:
+            return "Could not retrieve the translation for this verse."
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching Ayah text: {e}")
+        return "Could not retrieve the translation due to a network error."
+
+def get_tafsir_data(surah: int, ayah: int) -> dict:
+    """Fetches commentary with robust error handling."""
+    collected_data = {}
+    for source_name, source_slug in TAFSIR_SOURCES.items():
+        url = f"{TAFSIR_API_BASE_URL}/{source_slug}/{surah}/{ayah}.json"
+        try:
+            response = requests.get(url, timeout=10)
+            response.raise_for_status()
+            data = response.json()
+            text = data.get("text", "").strip()
+            collected_data[source_name] = text if text else DATA_UNAVAILABLE_MESSAGE
+        except requests.exceptions.RequestException as e:
+            print(f"Error fetching Tafsir from {source_slug}: {e}")
+            collected_data[source_name] = DATA_UNAVAILABLE_MESSAGE
+    return collected_data
+
+def generate_explanation_prompt(surah: int, ayah: int, ayah_text: str, tafsir_data: dict) -> str:
+    """
+    Constructs a more direct and forceful prompt to ensure the Ayah is printed.
+    """
+    # --- MODIFICATION START: This entire function is rewritten for clarity and forcefulness ---
+
+    # Start with a clear definition of the persona and overall goal.
+    prompt = f"""You are a helpful and knowledgeable assistant for Quranic studies. Your primary task is to provide a clear, multi-source explanation for Surah {surah}, Ayah {ayah}.
+
+**Your response MUST be structured in the following order:**
+
+**1. The Verse:**
+   - Start with the heading "### The Verse (Surah {surah}: Ayah {ayah})".
+   - Immediately after the heading, quote the English translation of the verse provided below.
+
+**2. The Explanation:**
+   - Based on the data provided, generate a detailed explanation. You must attribute every piece of information to its source using phrases like "According to Al-Wahidi...", "Ibn Kathir explains that...", etc.
+   - If the 'Shan-e-Nazool' (reason for revelation) from Al-Wahidi is available, present it first under the heading "### Shan-e-Nazool (Reason for Revelation)".
+   - If it is unavailable, DO NOT mention the unavailability. Simply proceed to the next section.
+   - Present the commentary from Tafsir Ibn Kathir under the heading "### Classical Commentary: Tafsir Ibn Kathir".
+   - Present the commentary from Maarif-ul-Quran under the heading "### Modern Commentary: Maarif-ul-Quran".
+
+**3. Summary:**
+   - Conclude with a brief summary under the heading "### Summary".
+
+---
+**DATA FOR YOUR TASK:**
+
+**[Verse Translation]:**
+{ayah_text}
+
+**[Al-Wahidi's Asbab Al-Nuzul]:**
+{tafsir_data.get('context')}
+
+**[Tafsir Ibn Kathir]:**
+{tafsir_data.get('classical')}
+
+**[Maarif-ul-Quran]:**
+{tafsir_data.get('modern')}
+---
+
+Begin your response now.
+"""
+    # --- MODIFICATION END ---
+    return prompt
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/explain', methods=['POST'])
+def explain_ayah():
+    if not groq_client:
+        return jsonify({"error": "Groq client is not initialized. Check API key."}), 500
+
+    data = request.get_json()
+    if not data or 'surah' not in data or 'ayah' not in data:
+        return jsonify({"error": "Missing Surah or Ayah number"}), 400
+
+    try:
+        surah = int(data['surah'])
+        ayah = int(data['ayah'])
+    except (ValueError, TypeError):
+        return jsonify({"error": "Surah and Ayah must be numbers"}), 400
+    
+    ayah_text = get_ayah_text(surah, ayah)
+    tafsir_data = get_tafsir_data(surah, ayah)
+    prompt = generate_explanation_prompt(surah, ayah, ayah_text, tafsir_data)
+    
+    try:
+        chat_completion = groq_client.chat.completions.create(
+            messages=[{"role": "user", "content": prompt}],
+            # MODIFICATION: Using the model name that is confirmed to be available and powerful.
+            model="llama-3.3-70b-versatile", 
+            temperature=0.6, # Slightly reduced for more factual consistency
+            max_tokens=2048,
+        )
+        explanation = chat_completion.choices[0].message.content
+        return jsonify({"explanation": explanation})
+    except Exception as e:
+        print(f"Error calling Groq API: {e}")
+        return jsonify({"error": f"Failed to get explanation from the language model: {e}"}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True)
+
+
+#llama-3.3-70b-versatile

index.html

@@ -0,0 +1,390 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quran Explainer</title>
+    
+    <!-- Google Font Import: Inter -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+    
+    <!-- Marked.js for Markdown rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+    <style>
+        /* --- Root Variables for Color Palette --- */
+        :root {
+            --bg-dark: #1a202c;
+            --card-bg: #2d3748;
+            --text-primary: #edf2f7;
+            --text-secondary: #a0aec0;
+            --accent-color: #d69e2e;
+            --border-color: #4a5568;
+            --skeleton-color: #4a5568;
+        }
+
+        /* --- General Body and Layout Styling --- */
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            line-height: 1.6;
+            color: var(--text-primary);
+            background-color: var(--bg-dark);
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
+        }
+
+        /* --- Main Container Card --- */
+        .container {
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            background: var(--card-bg);
+            padding: 40px;
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
+            transition: all 0.3s ease;
+            animation: fadeInUp 0.6s ease-out;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* --- Typography Hierarchy --- */
+        h1 {
+            text-align: center;
+            color: var(--text-primary);
+            font-weight: 700;
+            font-size: 2.25rem;
+            margin: 0;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: var(--text-secondary);
+            margin-top: 8px;
+            margin-bottom: 40px;
+        }
+
+        /* --- Form and Input Styling --- */
+        form {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: 15px;
+            margin-bottom: 30px;
+        }
+
+        input[type="number"] {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 12px 15px;
+            font-size: 16px;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+
+        input[type="number"]::placeholder {
+            color: var(--text-secondary);
+            opacity: 0.7;
+        }
+
+        input[type="number"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.2);
+        }
+
+        /* Remove number input spinners */
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        input[type=number] {
+            -moz-appearance: textfield;
+            appearance: textfield;
+        }
+        
+        button {
+            background-color: var(--accent-color);
+            color: #1a202c;
+            font-weight: 500;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            padding: 12px 25px;
+            transition: transform 0.2s, background-color 0.3s;
+        }
+
+        button:hover {
+            background-color: #e5b342;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(214, 158, 46, 0.3);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        /* --- New Skeleton Loader --- */
+        .loader {
+            display: none; /* Controlled by JS */
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background-color: var(--card-bg);
+        }
+
+        .skeleton {
+            background-color: var(--skeleton-color);
+            border-radius: 4px;
+            animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        .skeleton-title { height: 28px; width: 40%; margin-bottom: 20px; }
+        .skeleton-line { height: 16px; margin-bottom: 12px; }
+        .skeleton-line-1 { width: 90%; }
+        .skeleton-line-2 { width: 100%; }
+        .skeleton-line-3 { width: 75%; }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 1; }
+        }
+
+        /* --- Response Container and Content Styling --- */
+        #response-container {
+            margin-top: 20px;
+            opacity: 0;
+            transform: translateY(10px);
+            transition: opacity 0.5s ease, transform 0.5s ease;
+        }
+
+        /* Style for when JS makes the content visible */
+        #response-container:not(:empty) {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        #response-container h1,
+        #response-container h2,
+        #response-container h3,
+        #response-container h4 {
+            color: var(--accent-color);
+            margin-top: 25px;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+
+        #response-container h3 {
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 8px;
+        }
+
+        #response-container p {
+            color: var(--text-secondary);
+            margin-bottom: 15px;
+            line-height: 1.7;
+        }
+        
+        #response-container blockquote {
+            margin: 20px 0;
+            padding: 15px 20px;
+            background-color: var(--bg-dark);
+            border-left: 4px solid var(--accent-color);
+            font-style: italic;
+            color: var(--text-primary);
+            border-radius: 4px;
+        }
+
+        #response-container ul,
+        #response-container ol {
+            color: var(--text-secondary);
+            margin: 15px 0;
+            padding-left: 25px;
+        }
+
+        #response-container li {
+            margin-bottom: 8px;
+            line-height: 1.7;
+        }
+
+        #response-container strong {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        #response-container em {
+            color: var(--text-secondary);
+            font-style: italic;
+        }
+
+        #response-container code {
+            background-color: var(--bg-dark);
+            color: var(--accent-color);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.9em;
+            font-family: 'Courier New', monospace;
+        }
+
+        #response-container pre {
+            background-color: var(--bg-dark);
+            padding: 15px;
+            border-radius: 8px;
+            overflow-x: auto;
+            border: 1px solid var(--border-color);
+            margin: 15px 0;
+        }
+
+        #response-container pre code {
+            background-color: transparent;
+            padding: 0;
+            color: var(--text-primary);
+        }
+
+        #response-container hr {
+            border: none;
+            border-top: 1px solid var(--border-color);
+            margin: 25px 0;
+        }
+
+        #response-container .error {
+            color: #e53e3e;
+            font-weight: bold;
+            background-color: rgba(229, 62, 62, 0.1);
+            padding: 15px;
+            border-radius: 8px;
+            border-left: 4px solid #e53e3e;
+        }
+        
+        /* --- Footer --- */
+        footer {
+            text-align: center;
+            margin-top: 40px;
+            padding-top: 20px;
+            border-top: 1px solid var(--border-color);
+        }
+        
+        .disclaimer {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+        }
+
+        /* --- Responsive Design --- */
+        @media (max-width: 600px) {
+            body { 
+                padding: 10px; 
+            }
+            .container { 
+                padding: 25px 20px; 
+            }
+            h1 { 
+                font-size: 1.75rem; 
+            }
+            .subtitle {
+                font-size: 0.9rem;
+            }
+            form {
+                grid-template-columns: 1fr; /* Stack inputs and button */
+            }
+            button {
+                width: 100%;
+            }
+            #response-container h1,
+            #response-container h2,
+            #response-container h3,
+            #response-container h4 {
+                font-size: 1.2rem;
+            }
+        }
+
+    </style>
+</head>
+<body>
+    <br><br>
+    <main class="container">
+        <h1>Quran Explainer</h1>
+        <p class="subtitle">Enter a Surah and Ayah to receive a multi-source scholarly explanation.</p>
+
+        <form id="tafsir-form">
+            <input type="number" id="surah" name="surah" placeholder="Surah No." required>
+            <input type="number" id="ayah" name="ayah" placeholder="Ayah No." required>
+            <button type="submit">Get Explanation</button>
+        </form>
+
+        <!-- The new skeleton loader, still controlled by id="loader" -->
+        <div class="loader" id="loader">
+            <div class="skeleton skeleton-title"></div>
+            <div class="skeleton skeleton-line skeleton-line-1"></div>
+            <div class="skeleton skeleton-line skeleton-line-2"></div>
+            <div class="skeleton skeleton-line skeleton-line-3"></div>
+        </div>
+
+        <!-- The response container, which will be populated by JS -->
+        <div id="response-container"></div>
+        
+        <footer>
+            <p class="disclaimer">This is an AI-powered tool for study and reference. Always consult with a qualified scholar for definitive religious guidance.
+                <br>GitHub repo <a href="https://github.com/spa5k/tafsir_api/tree/main">tafsir_api</a> is used to get the tasfir from different sources.
+            </p>
+        </footer>
+    </main>
+
+    <script>
+        // THIS SCRIPT BLOCK IS PRESERVED EXACTLY AS REQUIRED
+        document.getElementById('tafsir-form').addEventListener('submit', async function(event) {
+            event.preventDefault();
+            const surah = document.getElementById('surah').value;
+            const ayah = document.getElementById('ayah').value;
+            const responseContainer = document.getElementById('response-container');
+            const loader = document.getElementById('loader');
+            
+            // Clear previous response and show loader
+            responseContainer.innerHTML = '';
+            // We remove the transition classes to reset the fade-in state
+            responseContainer.style.opacity = '0'; 
+            responseContainer.style.transform = 'translateY(10px)';
+            loader.style.display = 'block';
+
+            try {
+                const response = await fetch('/explain', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ surah: surah, ayah: ayah })
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'An unknown error occurred.');
+                }
+                const data = await response.json();
+                responseContainer.innerHTML = marked.parse(data.explanation);
+                
+            } catch (error) {
+                responseContainer.innerHTML = `<p class="error">Error: ${error.message}</p>`;
+            } finally {
+                loader.style.display = 'none';
+                // Trigger the fade-in animation for the new content
+                responseContainer.style.opacity = '1';
+                responseContainer.style.transform = 'translateY(0)';
+            }
+        });
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,4 @@
+Flask
+requests
+groq
+python-dotenv