OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 assets	-	03/13/2025 04:09:56 AM	rwxr-xr-x
📁 clients	-	05/19/2025 10:07:13 AM	rwxr-xr-x
📄 deeplit.php	12.18 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 genai.php	38.06 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 genai_article_save.php	1.6 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 genai_function.php	21.48 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 genai_save.php	2.15 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 genai_style.css	3.69 KB	03/11/2025 09:30:56 AM	rw-r--r--
📄 genaicreative.php	20.81 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 index.php	32.24 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 latest_genai.php	45.55 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 process_genai.php	2.15 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 request_article.php	24.17 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 zgenai_function.php	17.26 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 zprocess_genai.php	2.02 KB	05/19/2025 10:07:13 AM	rw-r--r--

Editing: genai.php

<!doctype html>
<?
include '../assets/php/validate.logged.php';
include '../assets/php/function.php';
include '../inc/config.php';
include '../inc/function.php';

?>
<html lang="en">

<head>

<title>GenAI | Knobly Cream: Create &bull; Reach &bull; Measure</title>

.newsroll-dropbtn {
            border: none;
            color: rgba(255, 255, 255, 0.5);
            background-color: #212529;
        }

.newsroll-dropbtn:focus {
            border: none;
            outline: none;

}

.newsroll-dropdown-content {
            display: none;
            outline: none;
            position: relative;
            background-color: #212529;
            min-width: 160px;
            /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
            /* z-index: 1; */
        }

.newsroll-dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

.show {
            display: block;
        }

.footer {
            text-align: center;
            padding: 20px;
            background-color: black !important;
            color: #777;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

.reportButton {
            margin: 2px;
            /* Adds spacing around each button */
        }

@media (max-width: 768px) {

.button-container {
                gap: 5px;
            }

}

.container-fluid {
            /* padding: 7rem 2%; */
        }

/* Container Padding */
        @media screen and (max-width: 768px) {
            .container-fluid {
                padding: 0px 0 !important;
                max-width: 1400px;
                margin: 0 auto;

}

.sidebar .sidebar-content {
                background-color: white;
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding: 20px;
                color: black !important;
            }

}

.go-back-bar {
            margin-top: 100px;
        }

.sideWithMainContainer {
            display: flex;
            flex-direction: row;
            gap: 10px;
            overflow-x: hidden;

}

.container-fluid,
        .container,
        .generated-content {
            padding: 0px !important;
        }

.sideMaincontent {
            height: 85vh;
            overflow-y: scroll;
        }

@media (min-width: 768px) {
            .col-md-2 {
                padding: 0px !important;
            }

}

@media (max-width: 768px) {
            .col-md-2 {
                display: none !important;
            }

}

.active-tab {
            text-decoration: underline;
            color: #f26522 !important;
        }

/* Main layout container */
        #layoutSidenav {
            display: flex;
            flex-direction: column;
            height: 85vh;
            position: relative;
        }

/* Content area - scrollable */
        .content-area {
            flex: 1;
            overflow-y: auto;
            /* padding: 20px 0; */
            margin-bottom: 20px;
        }

/* Fixed input area at bottom with all controls */
        .input-area-fixed {
            position: relative;
            /* Changed from fixed initially */
            bottom: auto;
            padding: 50px 130px 25px 110px;
            /* padding: 10px 50px 25px 10px; */
            /* z-index: 1; */
            transition: all 0.3s ease;
            width: 100%;
        }

.input-area-fixed.fixed {
            display: flex;
            justify-content: center;
            position: fixed;
            width: 83%;
            bottom: 10px;
        }

/* Recommendations section */
        .recommendations-container {
            /* margin-top: 20px; */
            padding: 10px;
            border-radius: 8px;
            background-color: #f9f9f9;
            border: 1px solid #e0e0e0;
        }

.recommendation-item {
            padding: 5px 15px;
            margin-bottom: 8px;
            background-color: white;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            transition: all 0.2s ease;
        }

.recommendation-item:hover {
            background-color: #f0f0f0;
            transform: translateY(-2px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.recommendation-item:last-child {
            margin-bottom: 0;
        }

/* Additional responsive adjustments */
        @media (max-width: 768px) {

.input-area-fixed.fixed {
                width: 100%;
                padding: 10px;
                bottom: 22px;
            }

.input-area-fixed.fixed {
                left: 0;
            }

.recommendations-container {
                /* margin-top: 15px; */
                padding: 10px;
            }
        }

/* Input area styling */
        .input-control-wrapper {
            width: 100%;
            background-color: white;
            border-radius: 8px;
            /* border: 1px solid rgba(0, 0, 0, 0.41); */
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin-bottom: 30px;
        }

/* Button bar within input area */
        .button-bar {
            display: flex;
            padding: 8px 12px;
            border-bottom: 1px solid #f0f0f0;
            background-color: #fafafa;
        }

.button-container {
            overflow-x: auto;
            display: flex;
            gap: 8px;
            margin-right: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

/* Textarea styling */
        #working_headline {
            border: none;
            padding: 12px 15px;
            resize: none;
            width: 100%;
            min-height: 50px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

#working_headline:focus {
            outline: none;
        }

/* Bottom action bar */
        .action-bar {
            display: flex;
            justify-content: space-between;
            padding: 8px 12px;
            border-top: 1px solid #f0f0f0;
            background-color: #fafafa;
        }

/* Button styling */
        .reportButton {
            padding: 1px 12px;
            border-radius: 4px;
            background-color: transparent;
            border: 1px solid #00000040;
            color: #555;
            font-weight: 500;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }

.reportButton:hover {
            background-color: #f0f0f0;
        }

.reportButton.active-tab {
            background-color: #f0f0f0;
            border-color: rgb(0, 0, 0);
        }

.generated-text {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }

/* Action buttons */
        .btn-primary {
            background-color: #f58020;
            border-color: #f58020;
        }

.btn-primary:hover {
            background-color: #e57010;
            border-color: #e57010;
        }

.right-controls {
            display: flex;
            gap: 10px;
        }

#reset-btn,
        #clear-btn {
            padding: 0px 5px;
        }

.button-container2 {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            display: flex;
        }

/* Mobile adjustments */
        @media (max-width: 768px) {
            .generated-text {
                width: 100%;
            }

.input-area-fixed {
                padding: 70px 10px 25px 10px;
                width: 100%;
                left: 0;
            }

#layoutSidenav {
                /* padding-bottom: 200px; */
            }
        }

/* Toggle button styling */
        .input-toggle-btn {
            position: absolute;
            top: -30px;
            right: 50%;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f58020;
            color: white;
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 101;
            display: none;
            align-items: center;
            justify-content: center;
        }

.input-toggle-btn:hover {
            background-color: #e57010;
            transform: scale(1.05);
        }

/* Styling for collapsed input area */
        .input-area-fixed.collapsed {
            height: 30px;
            padding: 0;
            background: transparent;
        }

/* Additional padding for content area when input is expanded */
        .content-area {
            /* padding-bottom: 160px; */
            transition: padding-bottom 0.3s ease;
        }

/* td,
        tr {
            border: 1px solid black;
        } */

/* Make the input area responsive */
        @media (max-width: 768px) {
            .input-toggle-btn {
                right: 45%;
            }
        }

@media (max-width: 425px) {

#reset-btn,
            #clear-btn {
                font-size: 15px;
            }

.button-container {
                font-size: 15px;
                gap: 0px;
            }

.reportButton {
                padding: 0px 12px;
            }

.btn {
                padding: 0px 3px;
            }

h5 {
                font-size: 15px;
                padding: 0px;
            }
        }

.generated-content {
            /* max-height: 225px; */
            height: auto;
            overflow-y: auto;
            transition: max-height 0.3s ease;
        }

.generated-text {
            width: 80%;
        }

.generated-content.expanded {
            /* max-height: 400px; */
        }

.content-area {
            transition: padding-bottom 0.3s ease;
        }

.dummy {
            color: #db5919;

margin-top: 30px;
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.025em;
            text-align: center;
        }

/* Make the input area responsive */
        @media (max-width: 768px) {
            .dummy {
                font-size: x-large;
            }

.content-area.expanded-content {
                /* padding-bottom: 80px; */
            }

.generated-content.expanded {
                /* max-height: 350px; */
            }
        }

@media (max-width: 768px) {
            .col-sm-12 {
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
    </style>
</head>

<?php include '../assets/php/social_navbar.php' ?>

<?php
                    $_SESSION['.generated-text'] = "";
                    unset($_SESSION['prompt_message']);

?>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

}

@keyframes spin {
                            0% {
                                transform: rotate(0deg);
                            }

100% {
                                transform: rotate(360deg);
                            }
                        }
                    </style>

<div class="generated-content border bg-[#333] p-3 mt-3" style="display: none;">
                                <div class="" style="display: flex; justify-content:space-between">
                                    <h5>Deeplit Generated Content:</h5>

<div class="dummy">Ask Deeplit AI</div>

<div class="button-bar">
                                        <div class="button-container">
                                            <button id="reportButton2" class="reportButton" value="#live" title="live">
                                                <i class="fas fa-newspaper dropdown-icon"></i> Current Affairs
                                            </button>
                                            <button id="reportButton1" class="reportButton" value="#reporter" title="Convert the text that follows as a newspaper report">
                                                <i class="fas fa-newspaper dropdown-icon"></i> Report
                                            </button>
                                            <button id="reportButton3" class="reportButton" value="#code" title="Respond with the amazing coding solution.">
                                                <i class="fas fa-code dropdown-icon"></i> Code
                                            </button>
                                            <button id="reportButton4" class="reportButton" value="#table" title="Respond with a detailed Table.">
                                                <i class="fa-solid fa-table"></i> Table
                                            </button>
                                            <button id="reportButton5" class="reportButton" value="#computation" title="Respond with a computational output.">
                                                <i class="fa-solid fa-plus-minus"></i> Computation
                                            </button>
                                        </div>
                                        <div class="button-container2">
                                            
                                            <button id="reset-btn" name="reset" class="float-right btn btn-secondary  classReset" style="margin-right:10px;">Reset</button>
                                            
                                            <button id="clear-btn" name="clear" class="btn btn-secondary">Clear </button>
                                        </div>
                                    </div>

<div class="recommendations-container">
                                        <h5>Recommendations</h5>
                                        <div class="recommendation-item" data-prompt="Suggest social media marketing strategies for small businesses">
                                            Social media marketing strategies for small businesses
                                        </div>
                                        <div class="recommendation-item" data-prompt="Tell me a joke">
                                            Tell me a joke.
                                        </div>
                                        <div class="recommendation-item" data-prompt="Provide tips for effective content marketing">
                                            Tips for effective content marketing
                                        </div>
                                        <div class="recommendation-item" data-prompt="Provide tips for effective content marketing">
                                            Provide tips for effective content marketing
                                        </div>
                                    </div>
                                </div>
                            </div>

</div>
                    </div>

setActiveButton(this.id);
                        });
                        // Initialize by showing content for the first button
                        var initialValue = $('#reportButton1').val();
                        var initialTitle = $('#reportButton1').attr('title');

$('#reportButton2').addClass('active-tab');
                        // Function to generate the content
                        var avatar = '#live';

$(document).ready(function() {
                            $('#working_headline').on('keydown', function(event) {
                                if (event.key === 'Enter' && !event.shiftKey) {
                                    event.preventDefault(); // Prevent new line
                                    $('#submit-btn').click(); // Trigger button click
                                }
                            });
                            $('.button-container2').hide();

// Check if the div with class 'code-language' is empty
                            if ($.trim($('.code-language').text()) === '') {
                                $('.code-language').hide(); // Hide the div if it's empty
                            }

$('#saveButton').click(function() {
                                var generatedText = $('.generated-text').html();
                                // var workingHeadline = $('#working_headline').val();
                                var workingHeadline = prompt("Enter the Title");
                                generatedText = replaceBrWithNewline(generatedText);

if (!workingHeadline) {
                                    alert("Working Headline cannot be empty..");
                                    return;
                                }

// Call genai_save function here
                                genai_save(generatedText, workingHeadline);
                            });

// Function to share through whatsapp
                            $('#whatsapp-share-link').click(function(event) {
                                event.preventDefault(); // Prevent default link behavior

// Call the share_whatsapp function when the link is clicked
                                share_whatsapp();
                            });

$('#submit-btn').click(function() {
                                $('.loadingIndicator').show();
                                var headline = $('#working_headline').val();

// Make input area fixed when generating content
                                makeInputFixed();

// Check avatar status
                                if (avatar == '#live') {
                                    // Use the external API
                                    $.ajax({
                                        url: 'deeplit.php',
                                        type: 'POST',
                                        contentType: 'application/json',
                                        data: JSON.stringify({
                                            keywords: headline,
                                            resultCount: 5 // Or whatever you want
                                        }),
                                        success: function(response) {
                                            let output = '';

if (response.summary) {
                                                output = decodeURIComponent(response.summary);
                                            } else if (typeof response === 'string') {
                                                try {
                                                    var parsed = JSON.parse(response);
                                                    output = decodeURIComponent(parsed.summary || parsed.message || parsed.error || response);
                                                } catch (e) {
                                                    output = response;
                                                }
                                            }

output = formatMarkdown(output);
                                            $('.generated-text').append(output + '<br><br>');
                                            $('#working_headline').val('');
                                            $(".generated-content").show();
                                            $(".dummy").hide();
                                            $('.loadingIndicator').hide();
                                        },
                                        error: function(xhr, status, error) {
                                            console.error('External API request failed:', error);
                                            // alert('External AI API failed. Falling back to local processing.');
                                            fallbackToLocal(); // Fallback call
                                        }
                                    });
                                } else {
                                    fallbackToLocal();
                                }

function fallbackToLocal() {
                                    $.ajax({
                                        url: 'process_genai.php',
                                        type: 'POST',
                                        data: {
                                            avatar: avatar,
                                            working_headline: headline
                                        },
                                        success: function(response) {
                                            try {
                                                var decodedData = decodeURIComponent(response);
                                            } catch {
                                                decodedData = response;
                                            }

decodedData = formatMarkdown(decodedData);
                                            $('.generated-text').append(decodedData + '<br><br>');
                                            $('#working_headline').val('');
                                            $(".generated-content").show();
                                            $(".dummy").hide();
                                            $('.loadingIndicator').hide();
                                        },
                                        error: function() {
                                            console.error('Fallback AJAX request failed');
                                            alert('Error: Unable to fetch data locally.');
                                            $('.loadingIndicator').hide();
                                            makeInputRelative();
                                        }
                                    });
                                }
                            });

// Convert markdown tables to HTML tables
                                text = text.replace(/\|(.+?)\|[\r\n-]+([\s\S]+?)(\n\n|$)/g, function(match, header, body) {
                                    let headers = header.split('|').map(cell => cell.trim()).filter(cell => cell);
                                    let headerRow = '<tr>' + headers.map(h => `<th style="padding: 8px; text-align: left;">${h}</th>`).join('') + '</tr>';

let rows = body.split('\n').filter(row => row.trim() && !row.match(/^---/));
                                    let bodyRows = rows.map(row => {
                                        let cells = row.split('|').map(cell => cell.trim()).filter(cell => cell);
                                        return '<tr>' + cells.map(c => `<td style="padding: 8px;">${c}</td>`).join('') + '</tr>';
                                    }).join('');

return `<table border="1" style="border-collapse: collapse; width: 100%; margin-bottom: 20px; font-family: Arial, sans-serif;">
                    <thead>${headerRow}</thead>
                    <tbody>${bodyRows}</tbody>
                </table>`;
                                });

// Convert markdown bold (**text**) to <strong>text</strong>
                                text = text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");

// Convert markdown italic (*text*) to <em>text</em>
                                text = text.replace(/\*(.*?)\*/g, "<em>$1</em>");

// Convert markdown unordered lists (* item) into <ul> and <li>
                                text = text.replace(/^\*\s+(.+)$/gm, "<ul><li>$1</li></ul>");
                                text = text.replace(/<\/ul>\s*<ul>/g, "");

// Convert markdown links to actual <a> tags
                                text = text.replace(/\[([^\]]+)\]$([^)]+)$/g, '<a href="$2" target="_blank" style="color: #1a73e8; text-decoration: none;">$1</a>');

// Convert markdown images to <img> tags
                                text = text.replace(/!\[([^\]]+)\]$([^)]+)$/g, `<img src="$2" alt="$1" style="max-width: 100%; height: auto; margin: 15px 0; display: block;"/>`);

// Convert markdown line breaks to <br> tags (only for intentional breaks)
                                text = text.replace(/\n(?!\s*(<table|<ul|<li|<pre))/g, "<br>");

return `<div style="line-height: 1.6; margin-bottom: 75px; font-family: Arial, sans-serif;">${text}</div>`;
                            }

// Click handler for '.reportButton' elements
                            $('.reportButton').click(function() {
                                avatar = $(this).attr('value');
                            });

// Function for Clear button
                            $('#clear-btn').click(function() {
                                $('#working_headline').val(''); // Clear textarea
                            });

// Function for Reset button
                            $('#reset-btn').click(function() {
                                $.ajax({
                                    url: '/genai/process_genai.php',
                                    type: 'POST',
                                    data: {
                                        action: "reset"
                                    },
                                    success: function(response) {
                                        if (response == "Ok") {
                                            $('#working_headline').val('');
                                            $('.generated-text').html('');
                                            $('.generated-content').hide();

// Return to relative position with recommendations showing
                                            makeInputRelative();
                                        }
                                    },
                                    error: function() {
                                        console.error('Error while sending the request');
                                        $('.loadingIndicator').hide();
                                    }
                                });
                            });
                        });
                    </script>
                </div>
            </main>
        </div>
    </div>
    <? include '../assets/php/bottom_navbar.php' ?>
    <? include '../assets/php/footer.php' ?>

</body>
<script>
    $(document).ready(function() {
        // Function to make the input area relative
        function makeInputRelative() {
            $('.input-area-fixed').removeClass('fixed');
            // Show recommendations when input is relative
            $('.recommendations-container').show();
        }

// Initially set to relative position (not fixed)
        makeInputRelative();

// Handle recommendation clicks
        $('.recommendation-item').click(function() {
            var promptText = $(this).data('prompt');
            $('#working_headline').val(promptText);

avatar = "#reporter";

// Update the active button UI to show Current Affairs is selected
            $('.reportButton').removeClass('active-tab');
            $('#reportButton1').addClass('active-tab');

makeInputFixed();
            $('#submit-btn').click();
        });

// Create the toggle button for the input area
        var $toggleButton = $('<button class="input-toggle-btn" title="Toggle input area"><i class="fas fa-chevron-down"></i></button>');
        $('.input-area-fixed').prepend($toggleButton);

var inputAreaExpanded = true;

$toggleButton.on('click', function() {
            if (inputAreaExpanded) {
                // Collapse the input area
                $('.input-control-wrapper').slideUp(300);
                $(this).find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');

// Show recommendations (if not in fixed mode)
                if (!$('.input-area-fixed').hasClass('fixed')) {
                    $('.recommendations-container').show();
                }

// Increase content area space
                $('.content-area').addClass('expanded-content');
                $('.generated-content').addClass('expanded');
            } else {
                // Expand the input area
                $('.input-control-wrapper').slideDown(300);
                $(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');

// Return content area to normal
                $('.content-area').removeClass('expanded-content');
                $('.generated-content').removeClass('expanded');
            }

inputAreaExpanded = !inputAreaExpanded;
        });

});
</script>

</html>