harshit.pathak
/
content_quality_tool


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998
							{% load static %}
<!DOCTYPE html>
<html lang="en"> <!--begin::Head-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Content Scorecard</title><!--begin::Primary Meta Tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="CQT | GET DATA">
    <!--end::Primary Meta Tags--><!--begin::Fonts-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
        integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous">
    <!--end::Fonts--><!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css"
        integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css"
        integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
    <!--end::Third Party Plugin(Bootstrap Icons)--><!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="{% static './css/adminlte.css' %}"><!--end::Required Plugin(AdminLTE)--><!-- apexcharts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
        integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="{% static 'dist/WOW-master/css/libs/animate.css' %}"> -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <style>
        #full-page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader-overlay .spinner-border {
            width: 3rem;
            height: 3rem;
        }

    </style>
    <style>
    .card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        background-color: #fff;
        transition: box-shadow 0.3s ease;
    }

    .card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
/* 
    .card-img-top {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-bottom: 1px solid #e0e0e0;
    } */

    .card-block {
        display: block;
        width: 100%;
    }

    .card-title, .card-text {
        display: block;
        width: 100%;
        /* margin: 0; */
        padding: 10px;
        margin: 10px;
    }

    .card-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #333;
    }

    .card-text {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.5;
    }


    .card-footer {
        padding: 10px 16px;
        font-size: 0.85rem;
        background-color: #f8f9fa;
        border-top: 1px solid #e0e0e0;
        color: #666;
    }

    .card-header {
        background-color: #f1f1f1;
        padding: 10px 16px;
        font-weight: 600;
        font-size: 0.95rem;
        color: #333;
        border-bottom: 1px solid #ddd;
    }

    .table.projects {
        margin: 0;
    }

    .table td, .table th {
        padding: 8px;
        font-size: 0.9rem;
        vertical-align: middle;
    }

    .attribute-label {
        font-weight: 600;
        color: #333;
        margin-right: 4px;
    }

    .card-body input.dial {
        margin-bottom: 10px;
    }

    .after_score {
        animation: fadeIn 0.3s ease-in-out;
    }

    .row.mb-4 {
        margin-bottom: 2rem !important;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #fafafa;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @media (max-width: 768px) {
        .col-md-4 {
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 1rem;
        }

        .card-img-top {
            height: 180px;
        }
    }
</style>

</head>

<body class="layout-fixed sidebar-expand-lg sidebar-mini app-loaded sidebar-collapse"> <!--begin::App Wrapper-->
    <div class="app-wrapper"> <!--begin::Header-->
        {% include 'header.html' %}
        {% include 'sidebar.html' %}
        <main class="app-main"> <!--begin::App Content Header-->
            <div class="app-content-header"> <!--begin::Container-->
                <div class="container-fluid"> <!--begin::Row-->
                    <div class="row">
                        <div class="col-sm-6">
                            <h3 class="mb-0">📑 Scorecard</h3>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-end">
                                <li class="breadcrumb-item"><a href="{% url 'content-scorecard' %}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    📑 Scorecard
                                </li>
                            </ol>
                        </div>
                    </div> <!--end::Row-->
                </div> <!--end::Container-->
            </div>
            <div class="app-content"> <!--begin::Container-->
                <div class="container-fluid"> <!-- Info boxes -->
                <!-- Full Page Loader -->
                <div id="full-page-loader" style="display: none;">
                    <div class="loader-overlay">
                        <div class="spinner-border text-light" role="status">
                            <!-- <span class="sr-only">Loading...</span> -->
                        </div>
                    </div>
                </div>
                    <div id="html"></div>
                    <div class="row mt-5 ai-fix-issues-button"  style="display: none;">
                        <div class="col-sm-12 text-center">
                            <button class="btn btn-primary wow lightSpeedIn" data-wow-delay="1s"
                                onclick="$(this).hide();$('.after_score').removeClass('d-none');">AI
                                Fix Issues</button>
                        </div>
                    </div>
                </div> <!--end::Row--> <!--begin::Row-->
                <!-- Loader (initially hidden) -->
                <!-- <div id="ai-loader" class="spinner-border text-primary mt-3" role="status" style="display: none;">
                    <span class="sr-only">Loading...</span>
                </div> -->

            </div> <!--end::Container-->
        </main> <!--end::App Main--> <!--begin::Footer-->
        {% include 'footer.html' %}
    </div> <!--end::App Wrapper--> <!--begin::Script--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js"
        integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
    <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
        integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
    <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
    <script src="{% static './js/adminlte.js' %}"></script>
    <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
    <script>
        const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
        const Default = {
            scrollbarTheme: "os-theme-light",
            scrollbarAutoHide: "leave",
            scrollbarClickScroll: true,
        };
        document.addEventListener("DOMContentLoaded", function () {
            const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
            if (
                sidebarWrapper &&
                typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
            ) {
                OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
                    scrollbars: {
                        theme: Default.scrollbarTheme,
                        autoHide: Default.scrollbarAutoHide,
                        clickScroll: Default.scrollbarClickScroll,
                    },
                });
            }
        });
    </script> <!--end::OverlayScrollbars Configure--> <!-- OPTIONAL SCRIPTS --> <!-- apexcharts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"
        integrity="sha512-NhRZzPdzMOMf005Xmd4JonwPftz4Pe99mRVcFeRDcdCtfjv46zPIi/7ZKScbpHD/V0HB1Eb+ZWigMqw94VUVaw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- <script src="{% static 'dist/WOW-master/dist/wow.js' %}"></script> -->
     <script>
        const mediaUrl = "./../media/";
        console.log("mediaUrl",mediaUrl);
        let apiresults_without_filter;
        // 2. Function to filter the products based on localStorage 'productType'
function filterProductsByCategory() {
    // A. Retrieve the target category from localStorage
    // Use a key like 'productType' as requested, or adjust if your localStorage key is different.
    const targetCategory = localStorage.getItem('selectedproductType');

    // Handle case where localStorage value is missing or empty
    if (!targetCategory) {
        console.warn("localStorage item 'productType' not found or is empty. Returning all products.");
        return productData;
    }

    // B. Filter the product array
    // We assume that the category is available at the top level of each product object.
    const filteredData = apiresults_without_filter.filter(product => {
        // Ensure both values are compared consistently (case-insensitive trim)
        const productCategory = product.category ? product.category.trim().toLowerCase() : product.product_type ? product.product_type.trim().toLowerCase() : '';
        const filterValue = targetCategory.trim().toLowerCase();
        
        return productCategory === filterValue;
    });

    return filteredData;
}
        document.addEventListener('DOMContentLoaded', function () {
            var html = '';
            // const responseDiv = document.getElementById('batchScoreMessage');
            // Show loader
            $('#full-page-loader').show();
            // console.log("localStorage.getItem('analyticsdata')",localStorage.getItem('analyticsdata'));
            if (localStorage.getItem('analyticsdata') !== null) {
                // console.log('Data key exists in localStorage');
                apiresults_stringify = localStorage.getItem('analyticsdata');
                apiresults_without_filter = JSON.parse(apiresults_stringify);

                apiresults = filterProductsByCategory();
                // apiresults = [];

                // Define performance buckets
                    const bucketRanges = {
                        excellent: [85, 100],
                        good: [70, 84.99],
                        fair: [50, 69.99],
                        poor: [0, 49.99]
                    };

                    // Helper function to classify score
                    function classify(score) {
                        for (const [bucket, [low, high]] of Object.entries(bucketRanges)) {
                        if (score >= low && score <= high) return bucket;
                        }
                        return 'unknown';
                    }

                    // Group products by product type
                    const grouped = {};

                    apiresults.forEach(item => {
                        const valuesUsed = item?.ai_suggestions?.title_construction?.values_used || [];
                        const productType = item?.category || item?.product_type || 'Unknown';
                        const score = item.final_score || 0;
                        const breakdown = item.breakdown || {};
                        const titleQuality = breakdown.title_quality || 0;
                        const descriptionQuality = breakdown.description_quality || 0;
                        const imageScore = breakdown.image_score || item.image_score || 0;

                        if (!grouped[productType]) grouped[productType] = [];
                        grouped[productType].push({
                        score,
                        titleQuality,
                        descriptionQuality,
                        imageScore,
                        bucket: classify(score)
                        });
                    });

                    // Prepare final JSON structure
                    const output = {
                        performance_summary: { excellent: 0, good: 0, fair: 0, poor: 0 },
                        product_metrics: []
                    };

                    for (const [ptype, items] of Object.entries(grouped)) {
                        const total = items.length;
                        const bucketCounts = { excellent: 0, good: 0, fair: 0, poor: 0 };
                        let scoreSum = 0, titleSum = 0, descSum = 0, imageSum = 0;

                        items.forEach(item => {
                        bucketCounts[item.bucket]++;
                        scoreSum += item.score;
                        titleSum += item.titleQuality;
                        descSum += item.descriptionQuality;
                        imageSum += item.imageScore;
                        });

                        output.performance_summary.excellent += bucketCounts.excellent;
                        output.performance_summary.good += bucketCounts.good;
                        output.performance_summary.fair += bucketCounts.fair;
                        output.performance_summary.poor += bucketCounts.poor;

                        output.product_metrics.push({
                        product_type: ptype,
                        products: total,
                        avg_score: (scoreSum / total).toFixed(2),
                        excellent_percent: `${Math.round((bucketCounts.excellent / total) * 100)}%`,
                        good_percent: `${Math.round((bucketCounts.good / total) * 100)}%`,
                        fair_percent: `${Math.round((bucketCounts.fair / total) * 100)}%`,
                        poor_percent: `${Math.round((bucketCounts.poor / total) * 100)}%`,
                        avg_title_quality: (titleSum / total).toFixed(2),
                        avg_description_quality: (descSum / total).toFixed(2),
                        avg_image_quality: (imageSum / total).toFixed(2)
                        });
                    }
                    localStorage.setItem('performanceAnalysis',JSON.stringify(output));
                     apiresults.forEach(element => {
                        // console.log(element.final_score);
                        var initial_score = '';
                        var after_score = ''
                        var base_keys = { 'Title': 'title_quality', 'Description': 'description_quality', 'Image': 'image_score', 'Attributes': 'attributes' }

                        
                        Object.entries(base_keys).forEach(([key, value]) => {
                            let name = key;
                            
                            key = key.toLowerCase();
                            console.log("key",key);
                            console.log(element.breakdown[value], value);
                            var per = 0
                            if (element.breakdown[value]) {
                                per = element.breakdown[value];
                            }
                            var intial_desc = '';
                            if (element.categorized_feedback[key]) {
                                // console.log(element.categorized_feedback[key].issues);
                                intial_desc = element.categorized_feedback[key].issues.join(', ');
                            }
                            if(key == "image"){
                                // Build the breakdown progress HTML
                                let breakdownHtml = '';

                                for (const [key, value] of Object.entries(element.image_breakdown)) {
                                    breakdownHtml += `
                                        <div style="margin-bottom: 10px;">
                                            <strong>${key.charAt(0).toUpperCase() + key.slice(1)}</strong>
                                            <div class="progress progress-sm mt-1">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100"
                                                    style="width: ${value}%">
                                                </div>
                                            </div>
                                            <small>${value}%</small>
                                        </div>
                                    `;
                                }
                                initial_score += `<tr>
                                                        <td class="wow bounceInLeft">
                                                            <a>
                                                                `+ name + `
                                                            </a>
                                                        </td>

                                                        <td class="project_progress wow bounceInRight">
                                                            <div class="progress progress-sm">
                                                                <div class="progress-bar bg-green" role="progressbar"
                                                                    aria-valuenow="`+ per + `" aria-valuemin="0" aria-valuemax="100"
                                                                    style="width: `+ per + `%">
                                                                </div>
                                                            </div>
                                                            <small>
                                                                `+ per + `%
                                                            </small>
                                                        </td>

                                                    </tr>
                                                    <tr>
                                                    <td class="wow bounceInLeft" colspan='2' data-wow-delay="0.2s">
                                                        <div style='max-height:100px;overflow-y:auto;'>  
                                                            `+ breakdownHtml + `
                                                        </div>
                                                        </td>
                                                    </tr>`;
                            
                            }else{
                                initial_score += `<tr>
                                                        <td class="wow bounceInLeft">
                                                            <a>
                                                                `+ name + `
                                                            </a>
                                                        </td>

                                                        <td class="project_progress wow bounceInRight">
                                                            <div class="progress progress-sm">
                                                                <div class="progress-bar bg-green" role="progressbar"
                                                                    aria-valuenow="`+ per + `" aria-valuemin="0" aria-valuemax="100"
                                                                    style="width: `+ per + `%">
                                                                </div>
                                                            </div>
                                                            <small>
                                                                `+ per + `%
                                                            </small>
                                                        </td>

                                                    </tr>
                                                    <tr>
                                                    <td class="wow bounceInLeft" colspan='2' data-wow-delay="0.2s">
                                                        <div style='max-height:100px;overflow-y:auto;'>  
                                                        <small>
                                                            `+ intial_desc + `
                                                        </small>
                                                        </div>
                                                        </td>
                                                    </tr>`;
                            }                        
                        });
                        

                        Object.keys(base_keys).forEach(k => {
                            let name = k;
                            k = k.toLowerCase();
                            var ik = 'improved_' + k
                            console.log("ik",ik);
                            var after_desc = '';
                            if (element.ai_suggestions.content[ik]) {
                                console.log(element.ai_suggestions.content);
                                after_desc = element.ai_suggestions.content[ik];
                            }

                            let missing_attributes = '';
                            if(k == "attributes"){
                                if(element?.ai_suggestions?.content?.missing_attributes){
                                    Object.entries(element?.ai_suggestions?.content?.missing_attributes).forEach(([key, value]) => {     
                                        missing_attributes += `<li><span class="attribute-label">${key}:</span> ${value}</li>`         
                                    });
                                }
                            }


                            if(k == "image"){
                                after_score += `<tr>
                                        <td class="wow bounceInLeft">
                                            <a>
                                                `+ name + ` Note
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                    <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
                                        <div style='max-height:100px;overflow-y:auto;'>  
                                        <small>
                                              ${element?.ai_suggestions?.image?.note ? element.ai_suggestions.image.note : 'No notes available'}
                                        </small>
                                        </div>
                                        </td>
                                    </tr>`;
                            }else if(k == "attributes"){
                                after_score += `<tr>
                                    <td class="wow bounceInLeft">
                                        <a>
                                           Missing `+ name + `
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
                                    <div style='max-height:100px;overflow-y:auto;'>  
                                    <small> <ul>
                                        `+ missing_attributes + `
                                    </ul></small>
                                    </div>
                                    </td>
                                </tr>`;
                            }else{
                                after_score += `<tr>
                                    <td class="wow bounceInLeft">
                                        <a>
                                            `+ name + `
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
                                    <div style='max-height:100px;overflow-y:auto;'>  
                                    <small>
                                        `+ after_desc + `
                                    </small>
                                    </div>
                                    </td>
                                </tr>`;
                            }                    
                        })


                        html += `<div class="row mb-4" >
                                <div class="col-md-4">
                                    <div class="card">
                                        <img class="card-img-top wow pulse" data-wow-iteration="2"
                                            src="`+mediaUrl+element.image_path+`">
                                        
                                        <div class="card-block">
                                            <h4 class="card-title wow bounceInLeft d-block w-100" data-wow-delay="0.1s">` 
                                                + element.title + 
                                                `&nbsp; 
                                                <a href="` + element?.product_link + `" target="_blank" class="text-decoration-none text-dark">
                                                    <i class="bi bi-box-arrow-up-right ms-2" title="Open Product"></i>
                                                </a>
                                            </h4>
                                            <p class="card-text wow bounceInLeft d-block w-100" data-wow-delay="0.2s">` + element.description + `</p>
                                        </div>

                                        <div class="card-footer wow bounceInLeft" data-wow-delay="0.3s">
                                            <small>`+element.created_at+`</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header py-2">
                                            <div class="text-sm mb-0">Initial Score</div>
                                        </div>
                                        <div class="card-body text-center wow bounceInDown" data-wow-iteration="0.5">
                                            <input type="text" class="dial" value="`+ element.final_score + `" data-width="120" data-height="120"
                                                data-readOnly='true' data-fgColor="#3c8dbc" data-bgColor="#e8e8e8"
                                                data-thickness=".2">
                                            <div class="mt-2">Overall Score</div>
                                        </div>
                                        <table class="table table-striped projects mb-0 table-sm">
                                            <tbody>
                                                `+ initial_score + `
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                                <div class="col-md-4 after_score d-none">
                                    <div class="card">
                                        <div class="card-header py-2">
                                            <div class="text-sm mb-0">Forecasted Score</div>
                                        </div>
                                        <div class="card-body text-center wow bounceInDown" data-wow-iteration="0.5">
                                            <input type="text" class="dial" value="`+ element.ai_suggestions.content.quality_score_prediction + `" data-width="120" data-height="120"
                                                data-readOnly='true' data-fgColor="#198754" data-bgColor="#e8e8e8"
                                                data-thickness=".2">
                                            <div class="mt-2">Overall Score</div>
                                        </div>
                                        <table class="table table-striped projects mb-0 table-sm">
                                            <tbody>
                                                `+ after_score + `
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                </div>
                            </div > `;
                        // console.log('werrrrrrrrrrrrrrrrrrr', html);

                    });

                    $('#html').html(html);
                    $('.dial').knob();
                    
                    document.querySelector('.ai-fix-issues-button').style.display = 'block';
                    console.log('Generated Metrics:', output);
                    $('#full-page-loader').hide();
             } else {
                console.log('Data key not found');
            fetch('/core/api/rr-content-card/', {
                method: 'GET', // or 'POST' if your API expects POST
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    var html = '';
                    localStorage.setItem('analyticsdata',JSON.stringify(data.results));
                    data.results.forEach(element => {
                        // console.log(element.final_score);
                        var initial_score = '';
                        var after_score = ''
                        var base_keys = { 'Title': 'title_quality', 'Description': 'description_quality', 'Image': 'image_score', 'Attributes': 'attributes' }


                        Object.entries(base_keys).forEach(([key, value]) => {
                            let name = key;
                            
                            key = key.toLowerCase();
                            console.log("key",key);
                            console.log(element.breakdown[value], value);
                            var per = 0
                            if (element.breakdown[value]) {
                                per = element.breakdown[value];
                            }
                            var intial_desc = '';
                            if (element.categorized_feedback[key]) {
                                // console.log(element.categorized_feedback[key].issues);
                                intial_desc = element.categorized_feedback[key].issues.join(', ');
                            }
                            if(key == "image"){
                                // Build the breakdown progress HTML
                                let breakdownHtml = '';

                                for (const [key, value] of Object.entries(element.image_breakdown)) {
                                    breakdownHtml += `
                                        <div style="margin-bottom: 10px;">
                                            <strong>${key.charAt(0).toUpperCase() + key.slice(1)}</strong>
                                            <div class="progress progress-sm mt-1">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100"
                                                    style="width: ${value}%">
                                                </div>
                                            </div>
                                            <small>${value}%</small>
                                        </div>
                                    `;
                                }
                                initial_score += `<tr>
                                                        <td class="wow bounceInLeft">
                                                            <a>
                                                                `+ name + `
                                                            </a>
                                                        </td>

                                                        <td class="project_progress wow bounceInRight">
                                                            <div class="progress progress-sm">
                                                                <div class="progress-bar bg-green" role="progressbar"
                                                                    aria-valuenow="`+ per + `" aria-valuemin="0" aria-valuemax="100"
                                                                    style="width: `+ per + `%">
                                                                </div>
                                                            </div>
                                                            <small>
                                                                `+ per + `%
                                                            </small>
                                                        </td>

                                                    </tr>
                                                    <tr>
                                                    <td class="wow bounceInLeft" colspan='2' data-wow-delay="0.2s">
                                                        <div style='max-height:100px;overflow-y:auto;'>  
                                                            `+ breakdownHtml + `
                                                        </div>
                                                        </td>
                                                    </tr>`;
                            
                            }else{
                                initial_score += `<tr>
                                                        <td class="wow bounceInLeft">
                                                            <a>
                                                                `+ name + `
                                                            </a>
                                                        </td>

                                                        <td class="project_progress wow bounceInRight">
                                                            <div class="progress progress-sm">
                                                                <div class="progress-bar bg-green" role="progressbar"
                                                                    aria-valuenow="`+ per + `" aria-valuemin="0" aria-valuemax="100"
                                                                    style="width: `+ per + `%">
                                                                </div>
                                                            </div>
                                                            <small>
                                                                `+ per + `%
                                                            </small>
                                                        </td>

                                                    </tr>
                                                    <tr>
                                                    <td class="wow bounceInLeft" colspan='2' data-wow-delay="0.2s">
                                                        <div style='max-height:100px;overflow-y:auto;'>  
                                                        <small>
                                                            `+ intial_desc + `
                                                        </small>
                                                        </div>
                                                        </td>
                                                    </tr>`;
                            }                        
                        });
                        

                        Object.keys(base_keys).forEach(k => {
                            let name = k;
                            k = k.toLowerCase();
                            var ik = 'improved_' + k
                            console.log("ik",ik);
                            var after_desc = '';
                            if (element.ai_suggestions.content[ik]) {
                                console.log(element.ai_suggestions.content);
                                after_desc = element.ai_suggestions.content[ik];
                            }

                            let missing_attributes = '';
                            if(k == "attributes"){
                                if(element?.ai_suggestions?.content?.missing_attributes){
                                    Object.entries(element?.ai_suggestions?.content?.missing_attributes).forEach(([key, value]) => {     
                                        missing_attributes += `<li><span class="attribute-label">${key}:</span> ${value}</li>`         
                                    });
                                }
                            }


                            if(k == "image"){
                                after_score += `<tr>
                                        <td class="wow bounceInLeft">
                                            <a>
                                                `+ name + ` Note
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                    <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
                                        <div style='max-height:100px;overflow-y:auto;'>  
                                        <small>
                                              ${element?.ai_suggestions?.image?.note ? element.ai_suggestions.image.note : 'No notes available'}
                                        </small>
                                        </div>
                                        </td>
                                    </tr>`;
                            }else if(k == "attributes"){
                                after_score += `<tr>
                                    <td class="wow bounceInLeft">
                                        <a>
                                           Missing `+ name + `
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
                                    <div style='max-height:100px;overflow-y:auto;'>  
                                    <small> <ul>
                                        `+ missing_attributes + `
                                    </ul></small>
                                    </div>
                                    </td>
                                </tr>`;
                            }else{
                                after_score += `<tr>
                                    <td class="wow bounceInLeft">
                                        <a>
                                            `+ name + `
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                <td class="wow bounceInLeft" colspan='2'  data-wow-delay="0.2s">
                                    <div style='max-height:100px;overflow-y:auto;'>  
                                    <small>
                                        `+ after_desc + `
                                    </small>
                                    </div>
                                    </td>
                                </tr>`;
                            }                    
                        })


                        html += `<div class="row mb-4" >
                                <div class="col-md-4">
                                    <div class="card">
                                        <img class="card-img-top wow pulse" data-wow-iteration="2"
                                            src="`+mediaUrl+element.image_path+`">
                                        
                                        <div class="card-block">
                                            <h4 class="card-title wow bounceInLeft d-block w-100" data-wow-delay="0.1s">` 
                                                + element.title + 
                                                `&nbsp; 
                                                <a href="` + element?.product_link + `" target="_blank" class="text-decoration-none text-dark">
                                                    <i class="bi bi-box-arrow-up-right ms-2" title="Open Product"></i>
                                                </a>
                                            </h4>
                                            <p class="card-text wow bounceInLeft d-block w-100" data-wow-delay="0.2s">` + element.description + `</p>
                                        </div>

                                        <div class="card-footer wow bounceInLeft" data-wow-delay="0.3s">
                                            <small>`+element.created_at+`</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header py-2">
                                            <div class="text-sm mb-0">Initial Score</div>
                                        </div>
                                        <div class="card-body text-center wow bounceInDown" data-wow-iteration="0.5">
                                            <input type="text" class="dial" value="`+ element.final_score + `" data-width="120" data-height="120"
                                                data-readOnly='true' data-fgColor="#3c8dbc" data-bgColor="#e8e8e8"
                                                data-thickness=".2">
                                            <div class="mt-2">Overall Score</div>
                                        </div>
                                        <table class="table table-striped projects mb-0 table-sm">
                                            <tbody>
                                                `+ initial_score + `
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                                <div class="col-md-4 after_score d-none">
                                    <div class="card">
                                        <div class="card-header py-2">
                                            <div class="text-sm mb-0">Forecasted Score</div>
                                        </div>
                                        <div class="card-body text-center wow bounceInDown" data-wow-iteration="0.5">
                                            <input type="text" class="dial" value="`+ element.ai_suggestions.content.quality_score_prediction + `" data-width="120" data-height="120"
                                                data-readOnly='true' data-fgColor="#198754" data-bgColor="#e8e8e8"
                                                data-thickness=".2">
                                            <div class="mt-2">Overall Score</div>
                                        </div>
                                        <table class="table table-striped projects mb-0 table-sm">
                                            <tbody>
                                                `+ after_score + `
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                </div>
                            </div > `;
                        // console.log('werrrrrrrrrrrrrrrrrrr', html);

                    });

                    $('#html').html(html);
                    $('.dial').knob();
                    
                    document.querySelector('.ai-fix-issues-button').style.display = 'block';
                    $('#full-page-loader').hide();
                    // });
                    new WOW().init();


                    // Define performance buckets
                    const bucketRanges = {
                        excellent: [85, 100],
                        good: [70, 84.99],
                        fair: [50, 69.99],
                        poor: [0, 49.99]
                    };

                    // Helper function to classify score
                    function classify(score) {
                        for (const [bucket, [low, high]] of Object.entries(bucketRanges)) {
                        if (score >= low && score <= high) return bucket;
                        }
                        return 'unknown';
                    }

                    // Group products by product type
                    const grouped = {};

                    data.results.forEach(item => {
                        const valuesUsed = item?.ai_suggestions?.title_construction?.values_used || [];
                        const productType = item?.category || item?.product_type || 'Unknown';
                        const score = item.final_score || 0;
                        const breakdown = item.breakdown || {};
                        const titleQuality = breakdown.title_quality || 0;
                        const descriptionQuality = breakdown.description_quality || 0;
                        const imageScore = breakdown.image_score || item.image_score || 0;

                        if (!grouped[productType]) grouped[productType] = [];
                        grouped[productType].push({
                        score,
                        titleQuality,
                        descriptionQuality,
                        imageScore,
                        bucket: classify(score)
                        });
                    });

                    // Prepare final JSON structure
                    const output = {
                        performance_summary: { excellent: 0, good: 0, fair: 0, poor: 0 },
                        product_metrics: []
                    };

                    for (const [ptype, items] of Object.entries(grouped)) {
                        const total = items.length;
                        const bucketCounts = { excellent: 0, good: 0, fair: 0, poor: 0 };
                        let scoreSum = 0, titleSum = 0, descSum = 0, imageSum = 0;

                        items.forEach(item => {
                        bucketCounts[item.bucket]++;
                        scoreSum += item.score;
                        titleSum += item.titleQuality;
                        descSum += item.descriptionQuality;
                        imageSum += item.imageScore;
                        });

                        output.performance_summary.excellent += bucketCounts.excellent;
                        output.performance_summary.good += bucketCounts.good;
                        output.performance_summary.fair += bucketCounts.fair;
                        output.performance_summary.poor += bucketCounts.poor;

                        output.product_metrics.push({
                        product_type: ptype,
                        products: total,
                        avg_score: (scoreSum / total).toFixed(2),
                        excellent_percent: `${Math.round((bucketCounts.excellent / total) * 100)}%`,
                        good_percent: `${Math.round((bucketCounts.good / total) * 100)}%`,
                        fair_percent: `${Math.round((bucketCounts.fair / total) * 100)}%`,
                        poor_percent: `${Math.round((bucketCounts.poor / total) * 100)}%`,
                        avg_title_quality: (titleSum / total).toFixed(2),
                        avg_description_quality: (descSum / total).toFixed(2),
                        avg_image_quality: (imageSum / total).toFixed(2)
                        });
                    }

                    localStorage.setItem('performanceAnalysis',JSON.stringify(output));

                    console.log('Generated Metrics:', output);
                    $('#full-page-loader').hide();


                    // responseDiv.innerHTML = `<div class="alert alert-success">✅ ${data.message}</div>`;
                } else {
                    $('#full-page-loader').hide();
                    // responseDiv.innerHTML = `<div class="alert alert-danger">❌ ${data.error}</div>`;
                }

                // Remove message after 5 seconds
                // setTimeout(() => {
                //     responseDiv.innerHTML = '';
                // }, 5000);
            })
            .catch(error => {
                $('#full-page-loader').hide();
                // responseDiv.innerHTML = `<div class="alert alert-danger">❌ API call failed: ${error}</div>`;
                // setTimeout(() => {
                //     responseDiv.innerHTML = '';
                // }, 5000);
            });
                       
            
            }

        });
        </script>
    
</body><!--end::Body-->

</html>