EVOLUTION-NINJA

Edit File: ai.php

<?php echo view('NewIncludes/Header.php');?>

<div class="container-fluid">
    <div class="row">
        
        <div class="col-sm-2">
            <div class="med-side-bar">
                <div class="side-heading">
                    
                    <h3><u>AI</u></h3>
                </div>
            </div>
        </div>
        
        <div class="col-sm-10">
            <h1>Ai Chat </h1>
                <label for="text">Enter Text:</label>
                <textarea id="text" rows="4" cols="50" required></textarea><br>

<button onclick="getinfo()">Submit</button>

<h2>Chat Result</h2>
                <div id="chat-result"></div>

fetch('generate', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({ text: text }),
                        })
                            .then(response => response.text())
                            .then(data => {
                                console.log(data);

try {
                                    var jsonData = JSON.parse(data);
                                    var chatResult = document.getElementById('chat-result');
                                    chatResult.innerHTML = '';

chatResult.innerHTML += '<p>User: ' + text + '</p>';

chatResult.innerHTML += '<p>AI: ' + jsonData.choices[0].message.content + '</p>';
                                } catch (jsonError) {
                                    console.error('JSON Parsing Error:', jsonError);
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                            });
                    }
                </script>
        </div>
    </div>
</div>
</div>
</div>

<style>
    .med-side-bar {
        background: linear-gradient(92.52deg, #00589B 2.21%, #009CD0 98%);
        min-height: 1010px !important;
        width: 100%;
    }

@media only screen and (max-width: 600px) {
        .card {
            margin-left: 51px !important;
        }
    }

.card {
        margin-top: 280px;
        margin-left: 75px;
        border: none;

}

.loader {
        color: #00599C;
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 37px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        height: 50px;
        padding: 10px 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: 8px;
        width: 130%;
        margin-left: -56px;

}

.words {
        overflow: hidden;
        position: relative;
    }

.words::after {
        content: "";
        position: absolute;
        inset: 0;
        color: rgba(5, 141, 251, 1);

z-index: 20;
    }

.word {
        display: block;
        height: 100%;
        padding-left: 6px;
        color: rgba(5, 141, 251, 1);
        animation: spin_4991 4s infinite;
    }

@keyframes spin_4991 {
        10% {
            -webkit-transform: translateY(-102%);
            transform: translateY(-102%);
        }

25% {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
        }

35% {
            -webkit-transform: translateY(-202%);
            transform: translateY(-202%);
        }

50% {
            -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
        }

60% {
            -webkit-transform: translateY(-302%);
            transform: translateY(-302%);
        }

75% {
            -webkit-transform: translateY(-300%);
            transform: translateY(-300%);
        }

85% {
            -webkit-transform: translateY(-402%);
            transform: translateY(-402%);
        }

100% {
            -webkit-transform: translateY(-400%);
            transform: translateY(-400%);
        }
    }

.loader1 {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        width: 160px;
        height: 100px;
        margin-left: -80px;
        margin-top: -50px;
        border-radius: 5px;
        background: #1e3f57;
        animation: dot1_ 3s cubic-bezier(0.55, 0.3, 0.24, 0.99) infinite;
    }

.loader1:nth-child(2) {
        z-index: 11;
        width: 150px;
        height: 90px;
        margin-top: -45px;
        margin-left: -75px;
        border-radius: 3px;
        background: #3c517d;
        animation-name: dot2_;
    }

.loader1:nth-child(3) {
        z-index: 12;
        width: 40px;
        height: 20px;
        margin-top: 50px;
        margin-left: -20px;
        border-radius: 0 0 5px 5px;
        background: #6bb2cd;
        animation-name: dot3_;
    }

@keyframes dot1_ {

3%,
        97% {
            width: 160px;
            height: 100px;
            margin-top: -50px;
            margin-left: -80px;
        }

30%,
        36% {
            width: 80px;
            height: 120px;
            margin-top: -60px;
            margin-left: -40px;
        }

63%,
        69% {
            width: 40px;
            height: 80px;
            margin-top: -40px;
            margin-left: -20px;
        }
    }

@keyframes dot2_ {

3%,
        97% {
            height: 90px;
            width: 150px;
            margin-left: -75px;
            margin-top: -45px;
        }

30%,
        36% {
            width: 70px;
            height: 96px;
            margin-left: -35px;
            margin-top: -48px;
        }

63%,
        69% {
            width: 32px;
            height: 60px;
            margin-left: -16px;
            margin-top: -30px;
        }
    }

@keyframes dot3_ {

3%,
        97% {
            height: 20px;
            width: 40px;
            margin-left: -20px;
            margin-top: 50px;
        }

30%,
        36% {
            width: 8px;
            height: 8px;
            margin-left: -5px;
            margin-top: 49px;
            border-radius: 8px;
        }

63%,
        69% {
            width: 16px;
            height: 4px;
            margin-left: -8px;
            margin-top: -37px;
            border-radius: 10px;
        }
    }

@media only screen and (max-width:600px) {

.loader {

margin-left: -15px;
        }

.custom-btn {
            margin-right: 20px;
        }
    }
</style>

<script>
    function back() {
        window.location.href = "<?php echo base_url('med-connect'); ?>"
    }
</script>
<?php echo view('NewIncludes/Footer.php');?>