From 76c712bb5c8446ea36d23038fe0aedd587b71bae Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Tue, 18 Nov 2025 03:39:51 +0000
Subject: [PATCH] 100 done

---
 core/__pycache__/views.cpython-311.pyc | Bin 3344 -> 3743 bytes
 core/templates/core/index.html         | 210 ++++++++++++++++---------
 core/views.py                          |  91 ++++++-----
 static/css/custom.css                  |  17 +-
 4 files changed, 195 insertions(+), 123 deletions(-)

diff --git a/core/__pycache__/views.cpython-311.pyc b/core/__pycache__/views.cpython-311.pyc
index 89b7e7b5afd46e7bfb596702bd46f291eadc5dfc..2b72b90f0919618b8d9ec5edfa0bcb50b4ee64de 100644
GIT binary patch
literal 3743
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

delta 1669
zcmb`FO-vg{6oB9CdOf@N2ZLj5V2v$91IEZGieiGAssXpSm7t<ZRVlO)b(j?~r8ZeF
zf}kbNp@$p|d%$f|;S)*4C2bDPksg{>RSvtzl`N}~I5daewyGi__0m}kF{p<WsZTR+
z-^_dS=6$noGg$0!-FLZ~fJ*T9&dk7?s~wH6^>&}1vN0gp<~Yk^iDchG0NZrdWeOA9
z=P<<+_6kI~KdjBQF9svOumBs7fmNi!++ipHL7y_#qKM=lwachm6Ho#%)Vfe$RYpaG
zxkSAxOD)@h#pE%u(-pQ>MU<TrsF!f{EV4#;B9Nwg3~>;r%6tW1GuCRBAui%3%^8$I
z#B+~XwJCyiYh4;Bs;z;dJ!ScI#y`{2*s{Xq$cdx&!yKS;C*xM_s$Hg&mfC8Sn%yPd
zqq4J475C9OfHJRr%Xm2;XH<?}h_JTDbiGG>FQZEou<a0VodWt#52!t6#s3E;Z~!xW
z4CeeRVdBSNhPpv%ZNT?{+`o!XWN5OU;~J256>rhr*gohF>jVPQar7uxfpo6o+c?YD
zze{Kdmf5SYgcN@xy9z{9(H8BzZ93~hn=+_<$Yr}$e3SE1IxmH#tRl(bbXdtPWM<+u
zPLk!E{OC{a6U5iBEaeyH6>SoaKH9+7k+;@-E4QdDUYDlpp8QH!3kss<7ZRegX8%l5
zZsdq;wMC7cm6RHnSLDosY}2yBc#nf_%T^`PgUmM<rMyzZGdWtovLa*4D`>w85ss&3
zSo>ReqrHz>mLtDO-{B6JJT$l5Nma318*h5M&>6mqi`d`;)leU`90o7$HJ>pdE+kPk
zl(?HJrVOV@hiQws=$2P33%lN^?v0vuI2$(sUcY6dI=FJEtFOiMi<3Y5sIrFmJ{=~<
zMmp%lk^To`4=424s2)z54trOdSpcewV=vqg?yrP~AD=ZsBbCrd@tr+?XhU6B%kLWg
zc*Rfe;e8*YXOV$QWNc^Ih)h-@lO<g3jF`Z--$d1O7fUG`E5>y(zBjl)7b!y=(8Yo0
zfv!#Wm+tcIhs)oq->Ew(V`#iGG;RbYDuD?-P?)I3J}TidHUfQmpl{FDRgUiZV!AK(
z67LFU;eBwZPlxwPy25|M8@^mh={*+=F`<iz)9@X`+uwig6-{91Uu@_?5<T;@Z8+DR
zdhpGi7Q>UQc#^s&S?wMz;u1DIVg2OTr($we5^B8Q!P#2u)jJ0s%o>hF#gWi$iF`Y4
zwjW||of`|nlVDS-g?-W+PC411oE){ILd`?w(%IQuJbxo62bGycC4bP-wdQmtKA)RO
z&rhc_)9Hl_ZTa6^y)LVNzk$D~2Dw-Bxc$O4YMLxUNE>yJh?mfi3IA5|AdUJ5mK(GC

diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 9ea9049..2fed3b4 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -7,6 +7,30 @@
 <meta name="description" content="Generate SEO-optimized titles, keywords, and YouTube tags using AI.">
 <meta property="og:title" content="AI-Powered Content Generator">
 <meta property="og:description" content="Generate SEO-optimized titles, keywords, and YouTube tags using AI.">
+<style>
+    .loader {
+        display: none;
+        border: 4px solid #f3f3f3;
+        border-radius: 50%;
+        border-top: 4px solid #3498db;
+        width: 40px;
+        height: 40px;
+        -webkit-animation: spin 2s linear infinite; /* Safari */
+        animation: spin 2s linear infinite;
+        margin: 20px auto;
+    }
+
+    /* Safari */
+    @-webkit-keyframes spin {
+        0% { -webkit-transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(360deg); }
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
 {% endblock %}
 
 {% block structured_data %}
@@ -47,102 +71,41 @@
 
             <ul class="nav nav-tabs" id="myTab" role="tablist">
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link {% if form_type != 'youtube' %}active{% endif %}" id="website-tab" data-bs-toggle="tab" data-bs-target="#website" type="button" role="tab" aria-controls="website" aria-selected="true">Website SEO</button>
+                    <button class="nav-link active" id="website-tab" data-bs-toggle="tab" data-bs-target="#website" type="button" role="tab" aria-controls="website" aria-selected="true">Website SEO</button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link {% if form_type == 'youtube' %}active{% endif %}" id="youtube-tab" data-bs-toggle="tab" data-bs-target="#youtube" type="button" role="tab" aria-controls="youtube" aria-selected="false">YouTube SEO</button>
+                    <button class="nav-link" id="youtube-tab" data-bs-toggle="tab" data-bs-target="#youtube" type="button" role="tab" aria-controls="youtube" aria-selected="false">YouTube SEO</button>
                 </li>
             </ul>
 
             <div class="tab-content" id="myTabContent">
-                <div class="tab-pane fade {% if form_type != 'youtube' %}show active{% endif %}" id="website" role="tabpanel" aria-labelledby="website-tab">
-                    <form method="post" action="{% url 'home' %}" class="mt-4">
+                <div class="tab-pane fade show active" id="website" role="tabpanel" aria-labelledby="website-tab">
+                    <form method="post" action="{% url 'home' %}" class="mt-4 content-form">
                         {% csrf_token %}
                         <input type="hidden" name="form_type" value="website">
                         <div class="input-group mb-3">
-                            <input type="text" class="form-control" name="topic" placeholder="e.g., 'The future of renewable energy'" value="{% if form_type == 'website' %}{{ topic|default:'' }}{% endif %}">
+                            <input type="text" class="form-control" name="topic" placeholder="e.g., 'The future of renewable energy'">
                             <button class="btn btn-primary" type="submit">Generate</button>
                         </div>
                     </form>
-
-                    {% if results %}
-                    <div class="results-section">
-                        <h2>Your Results for "{{ topic }}"</h2>
-                        <div class="row">
-                            <div class="col-md-12">
-                                <div class="result-item">
-                                    <h3>Suggested Title</h3>
-                                    <div class="input-group">
-                                        <p id="generated-title" class="form-control">{{ results.title }}</p>
-                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('generated-title')">Copy</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-md-12">
-                                <div class="result-item">
-                                    <h3>SEO Keywords</h3>
-                                    <div class="input-group">
-                                        <p id="generated-keywords" class="form-control">{{ results.keywords|join:", " }}</p>
-                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('generated-keywords')">Copy</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    {% endif %}
+                    <div class="loader"></div>
+                    <div class="results-section mt-4"></div>
                 </div>
 
-                <div class="tab-pane fade {% if form_type == 'youtube' %}show active{% endif %}" id="youtube" role="tabpanel" aria-labelledby="youtube-tab">
-                    <form method="post" action="{% url 'home' %}" class="mt-4">
+                <div class="tab-pane fade" id="youtube" role="tabpanel" aria-labelledby="youtube-tab">
+                    <form method="post" action="{% url 'home' %}" class="mt-4 content-form">
                         {% csrf_token %}
                         <input type="hidden" name="form_type" value="youtube">
                         <div class="input-group mb-3">
-                            <input type="text" class="form-control" name="topic" placeholder="e.g., 'Unboxing the new iPhone'" value="{% if form_type == 'youtube' %}{{ topic|default:'' }}{% endif %}">
+                            <input type="text" class="form-control" name="topic" placeholder="e.g., 'Unboxing the new iPhone'">
                             <button class="btn btn-primary" type="submit">Generate</button>
                         </div>
                     </form>
-
-                    {% if youtube_results %}
-                    <div class="results-section">
-                        <h2>Your YouTube Results for "{{ topic }}"</h2>
-                        <div class="row">
-                            <div class="col-md-12">
-                                <div class="result-item">
-                                    <h3>Suggested Title</h3>
-                                    <div class="input-group">
-                                        <p id="youtube-title" class="form-control">{{ youtube_results.title }}</p>
-                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-title')">Copy</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-md-12">
-                                <div class="result-item">
-                                    <h3>Keywords</h3>
-                                    <div class="input-group">
-                                        <p id="youtube-keywords" class="form-control">{{ youtube_results.keywords|join:", " }}</p>
-                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-keywords')">Copy</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-md-12">
-                                <div class="result-item">
-                                    <h3>Hashtags</h3>
-                                    <div class="input-group">
-                                        <p id="youtube-hashtags" class="form-control">{{ youtube_results.hashtags|join:" " }}</p>
-                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-hashtags')">Copy</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    {% endif %}
+                    <div class="loader"></div>
+                    <div class="results-section mt-4"></div>
                 </div>
             </div>
         </div>
-
-        {% if error %}
-            <div class="alert alert-danger mt-4">{{ error }}</div>
-        {% endif %}
     </div>
 </div>
 
@@ -237,8 +200,107 @@
         </div>
     </div>
 </div>
+{% endblock %}
 
+{% block scripts %}
 <script>
+document.addEventListener('DOMContentLoaded', function () {
+    const forms = document.querySelectorAll('.content-form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            const loader = this.nextElementSibling;
+            const resultsSection = loader.nextElementSibling;
+            const formData = new FormData(this);
+            const formType = formData.get('form_type');
+
+            loader.style.display = 'block';
+            resultsSection.innerHTML = '';
+
+            fetch(this.action, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-CSRFToken': '{{ csrf_token }}'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                loader.style.display = 'none';
+                if (data.error) {
+                    resultsSection.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
+                    return;
+                }
+
+                let resultsHtml = '';
+                if (formType === 'website' && data.title && data.keywords) {
+                    resultsHtml = `
+                        <h2>Your Results for "${data.topic}"</h2>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="result-item">
+                                    <h3>Suggested Title</h3>
+                                    <div class="input-group">
+                                        <p id="generated-title" class="form-control">${data.title}</p>
+                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('generated-title')">Copy</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-12">
+                                <div class="result-item">
+                                    <h3>SEO Keywords</h3>
+                                    <div class="input-group">
+                                        <p id="generated-keywords" class="form-control">${data.keywords.join(', ')}</p>
+                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('generated-keywords')">Copy</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (formType === 'youtube' && data.title && data.keywords && data.hashtags) {
+                    resultsHtml = `
+                        <h2>Your YouTube Results for "${data.topic}"</h2>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="result-item">
+                                    <h3>Suggested Title</h3>
+                                    <div class="input-group">
+                                        <p id="youtube-title" class="form-control">${data.title}</p>
+                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-title')">Copy</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-12">
+                                <div class="result-item">
+                                    <h3>Keywords</h3>
+                                    <div class="input-group">
+                                        <p id="youtube-keywords" class="form-control">${data.keywords.join(', ')}</p>
+                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-keywords')">Copy</button>
+                                    </div>
+                                 </div>
+                            </div>
+                            <div class="col-md-12">
+                                <div class="result-item">
+                                    <h3>Hashtags</h3>
+                                    <div class="input-group">
+                                        <p id="youtube-hashtags" class="form-control">${data.hashtags.join(' ')}</p>
+                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('youtube-hashtags')">Copy</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                }
+                resultsSection.innerHTML = resultsHtml;
+            })
+            .catch(error => {
+                loader.style.display = 'none';
+                resultsSection.innerHTML = `<div class="alert alert-danger">An error occurred: ${error}</div>`;
+                console.error('Error:', error);
+            });
+        });
+    });
+});
+
 function copyToClipboard(elementId) {
     var text = document.getElementById(elementId).innerText;
     navigator.clipboard.writeText(text).then(function() {
@@ -247,7 +309,7 @@ function copyToClipboard(elementId) {
         var originalText = btn.innerText;
         btn.innerText = 'Copied!';
         setTimeout(function(){
-            btn.innerText = originalText;
+            btn.innerText = 'Copy';
         }, 2000);
     }, function(err) {
         /* error */
diff --git a/core/views.py b/core/views.py
index fb4b5b0..b642800 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,3 +1,4 @@
+from django.http import JsonResponse
 from django.shortcuts import render
 from ai.local_ai_api import LocalAIApi
 import logging
@@ -8,60 +9,58 @@ def home(request):
     """
     Render the landing page and handle the content generation form.
     """
-    context = {}
     if request.method == 'POST':
         topic = request.POST.get('topic', '').strip()
-        form_type = request.POST.get('form_type', 'website') # Default to website
-
-        context['topic'] = topic
-        context['form_type'] = form_type
+        form_type = request.POST.get('form_type', 'website')
 
         if not topic:
-            context['error'] = 'Please enter a topic.'
-        else:
-            try:
-                if form_type == 'website':
-                    prompt = {
-                        "input": [
-                            {"role": "system", "content": "You are an expert SEO content strategist. Generate a compelling blog post title and a list of relevant SEO keywords for a given topic. Return the result as a JSON object with two keys: 'title' and 'keywords'. The 'keywords' should be a list of strings."},
-                            {"role": "user", "content": f"The topic is: {topic}"},
-                        ],
-                        "text": {"format": {"type": "json_object"}},
-                    }
-                    response = LocalAIApi.create_response(prompt)
+            return JsonResponse({'error': 'Please enter a topic.'}, status=400)
 
-                    if response.get("success"):
-                        payload = LocalAIApi.decode_json_from_response(response)
-                        if payload:
-                            context['results'] = payload
-                        else:
-                            context['error'] = 'Failed to generate content. The AI response was not valid JSON.'
+        try:
+            if form_type == 'website':
+                prompt = {
+                    "input": [
+                        {"role": "system", "content": "You are an expert SEO content strategist. Generate a compelling blog post title and a list of relevant SEO keywords for a given topic. Return the result as a JSON object with two keys: 'title' and 'keywords'. The 'keywords' should be a list of strings."},
+                        {"role": "user", "content": f"The topic is: {topic}"},
+                    ],
+                    "text": {"format": {"type": "json_object"}},
+                }
+                response = LocalAIApi.create_response(prompt)
+
+                if response.get("success"):
+                    payload = LocalAIApi.decode_json_from_response(response)
+                    if payload:
+                        payload['topic'] = topic
+                        return JsonResponse(payload)
                     else:
-                        logger.warning("AI error: %s", response.get("error"))
-                        context['error'] = 'Failed to generate content due to an AI error.'
+                        return JsonResponse({'error': 'Failed to generate content. The AI response was not valid JSON.'}, status=500)
+                else:
+                    logger.warning("AI error: %s", response.get("error"))
+                    return JsonResponse({'error': 'Failed to generate content due to an AI error.'}, status=500)
 
-                elif form_type == 'youtube':
-                    prompt = {
-                        "input": [
-                            {"role": "system", "content": "You are a YouTube content expert. Generate a catchy title, a list of relevant keywords, and a list of hashtags for a given video topic. Return the result as a JSON object with three keys: 'title', 'keywords', and 'hashtags'. 'keywords' and 'hashtags' should be lists of strings."},
-                            {"role": "user", "content": f"The topic is: {topic}"},
-                        ],
-                        "text": {"format": {"type": "json_object"}},
-                    }
-                    response = LocalAIApi.create_response(prompt)
+            elif form_type == 'youtube':
+                prompt = {
+                    "input": [
+                        {"role": "system", "content": "You are a YouTube content expert. Generate a catchy title, a list of relevant keywords, and a list of hashtags for a given video topic. Return the result as a JSON object with three keys: 'title', 'keywords', and 'hashtags'. 'keywords' and 'hashtags' should be lists of strings."},
+                        {"role": "user", "content": f"The topic is: {topic}"},
+                    ],
+                    "text": {"format": {"type": "json_object"}},
+                }
+                response = LocalAIApi.create_response(prompt)
 
-                    if response.get("success"):
-                        payload = LocalAIApi.decode_json_from_response(response)
-                        if payload:
-                            context['youtube_results'] = payload
-                        else:
-                            context['error'] = 'Failed to generate content. The AI response was not valid JSON.'
+                if response.get("success"):
+                    payload = LocalAIApi.decode_json_from_response(response)
+                    if payload:
+                        payload['topic'] = topic
+                        return JsonResponse(payload)
                     else:
-                        logger.warning("AI error: %s", response.get("error"))
-                        context['error'] = 'Failed to generate content due to an AI error.'
+                        return JsonResponse({'error': 'Failed to generate content. The AI response was not valid JSON.'}, status=500)
+                else:
+                    logger.warning("AI error: %s", response.get("error"))
+                    return JsonResponse({'error': 'Failed to generate content due to an AI error.'}, status=500)
 
-            except Exception as e:
-                logger.error("An unexpected error occurred: %s", e)
-                context['error'] = 'An unexpected error occurred.'
+        except Exception as e:
+            logger.error("An unexpected error occurred: %s", e)
+            return JsonResponse({'error': 'An unexpected error occurred.'}, status=500)
 
-    return render(request, "core/index.html", context)
+    return render(request, "core/index.html", {})
diff --git a/static/css/custom.css b/static/css/custom.css
index 9220be7..9126186 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -3,15 +3,26 @@ body {
     background-color: #000000; /* Black */
     color: #FFFFFF; /* White */
     font-family: 'Playfair Display', serif;
+    background-image: url('../pasted-20251118-024426-e59dd4cc.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    position: relative;
 }
 
-/* Remove background image overlay */
 body::before {
-    display: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
+    z-index: -1;
 }
 
 /* Make sure content is on top of the overlay */
-.hero-section, .results-section {
+.hero-section, .results-section, .container {
     position: relative;
     z-index: 1;
 }