EVOLUTION-NINJA

Edit File: medu-ai2.php

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

<h4><b>Healthcare at your fingertips with MeduAI - an innovative conversational AI</b></h4>

</div>
            </div>
            <div class="row mt-3">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    
                    <h5 class="ai-txt">Your ultimate companion for staying informed, making informed decisions, and
                        delivering exceptional patient care.
                    </h5>
                    
                </div>
            </div>
            
            <div class="container">
                <div class="row mt-2">
                    <div class="col-sm-12 chat-ans">
                        <div id="chat-result" class='p-4'></div>
                        <div id="loading-spinner" class='p-4' style="display: none;">
                            <div class="spinner">
                                <span></span>
                                <span></span>
                                <span></span>
                              </div>
                        </div>   
                    </div>
                </div>
            </div>
            
            <div class="container mt-2 searc-ai" style="background: linear-gradient(92.52deg, #00589B 2.21%, #009CD0 98%); padding:10px 0px; border-radius:5px;">

<div class="row mt-3">
                    <div class="col-sm-12 search-ques">
                        <h3><b style="display: flex; justify-content: center;"> <img src="public/assets/home_images/MeduAi_icon.png" alt="icon" class="ai-ic"> Where Knowledge Begins</b></h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="col-sm-9">
                        <div class="inp-ques">
                            <input type="search" name="" id="text" placeholder="Ask anything..."
                                onkeydown="checkEnterKey(event)" class="form-control ">
                            
                            <button class="search-icon" onclick="getinfo()"> <img src="<?php echo base_url('public/assets/images/Sign_in.png')?>" class=""
                                    alt="search icon"> </button>
                        </div>
                        <div class="row mob-discl">
                            
                            <div class="col-sm-12">
                                <button type="button" onclick='clearContent()'
                                    class="btn mt-2 clr-btn btn-rig-arr">Clear &nbsp;<img src="<?php echo base_url('public/assets/images/foc-Icon.png')?>"
                                        alt="Clear-img" width: 35%;></button>
                                        <a href="medu-ai-disclaimer" class="mo-dcl">Disclaimer</a>
                            </div>
                            
                        </div>
                    </div>
                    <div class="col-sm-2"></div>
                </div>
            </div>
            <div class="container">
                <div class="row disclaimer">
                    <div class="col-sm-12">
                        <p>Disclaimer: Welcome to MeduAI, our GPT (Generative Pre-trained Transformer) tool, which is sophisticated software program designed to engage in text-based conversations with doctors . Before you proceed to use this tool, it is important to read and understand the following disclaimer: <br> <a href="medu-ai-disclaimer" class="dis-link">Click here for read</a></p>
                      
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function clearContent() {
        var chatResult = document.getElementById('chat-result');
        var youtubeVideos = document.getElementById('youtube-videos');
        if (chatResult.innerHTML.trim() !== '' || youtubeVideos.innerHTML.trim() !== '') {
            chatResult.innerHTML = '';
            youtubeVideos.innerHTML = '';

console.log('Content cleared successfully.');

} else {
            console.log('there is no content to clear')
        }
    }

fetch('generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ text: text }),
        })
            .then(response => response.text())
            .then(data => {
                console.log(data);
                var text1 = document.getElementById('text');
                text1.value = '';
                try {
                    var jsonData = JSON.parse(data);

var content = jsonData.textcontent;
                    var lines = content.split('\n');
                    var contentContainer = document.getElementById('chat-result');
                    contentContainer.innerHTML += `<h4><i class="fa fa-user-circle-o" aria-hidden="true"></i> ${text} </h4>`;

var ul = document.createElement('ul');
                    lines.forEach(line => {
                        var p = document.createElement('p');
                        p.textContent = line;
                        contentContainer.appendChild(p);
                    });

// contentContainer.lastElementChild.scrollIntoView({ behavior: 'smooth' });

} catch (jsonError) {
                    console.error('JSON Parsing Error:', jsonError);
                } finally {
                    hideLoadingSpinner();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                hideLoadingSpinner();
            });
    } else {
        toastr.warning('Please Enter Something..');
    }
}
</script>
<script>
    // var text = '<?//php echo $question ; ?>';

if (text !== '') {
            showLoadingSpinner();

fetch('generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text }),
            })
                .then(response => response.text())
                .then(data => {
                    console.log(data);
                    var text1 = document.getElementById('text');
                    text1.value = '';
                    try {
                        var jsonData = JSON.parse(data);

var content = jsonData.textcontent;
                        var lines = content.split('\n');
                        var contentContainer = document.getElementById('chat-result');
                        contentContainer.innerHTML += `<h4><i class="fa fa-user-circle-o" aria-hidden="true"></i> ${text} </h4>`;

var ul = document.createElement('ul');
                        lines.forEach(line => {
                            var p = document.createElement('p');
                            p.textContent = line;
                            contentContainer.appendChild(p);
                        });

} catch (jsonError) {
                        console.error('JSON Parsing Error:', jsonError);
                    } finally {
                        hideLoadingSpinner();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    hideLoadingSpinner();
                });
        }

function showLoadingSpinner() {
    var loadingSpinner = document.getElementById('loading-spinner');
    loadingSpinner.style.display = 'block';

// Scroll to the loading-spinner div
    loadingSpinner.scrollIntoView({ behavior: 'smooth' });
}

function hideLoadingSpinner() {
    var loadingSpinner = document.getElementById('loading-spinner');
    loadingSpinner.style.display = 'none';
}

</script>

.search-icon:hover {
    
    filter: brightness(1.5); 
}

.search-icon:active {
    transform: scale(0.7); 
}

/*----------------- spinner--------------------- */
.spinner {
 --clr: rgb(4, 157, 177);
 --gap: 6px;
   /* gap between each circle */
 width: 100px;
 /* height: 100px; */
 display: flex;
 justify-content: center;
 align-items: center;
 gap: var(--gap);
}

.spinner span {
width: 10px;
height: 10px;
 border-radius: 100%;
 background-color: var(--clr);
 opacity: 0;
}

.spinner span:nth-child(1) {
 animation: fade 1s ease-in-out infinite;
}

.spinner span:nth-child(2) {
 animation: fade 1s ease-in-out 0.33s infinite;
}

.spinner span:nth-child(3) {
 animation: fade 1s ease-in-out 0.66s infinite;
}

@keyframes fade {
 0%, 100% {
  opacity: 1;
 }

60% {
  opacity: 0;
 }
}
 /*----------------- spinner end--------------------- */

.side-nav {
        min-height: 105vh !important;
    }

.btn-rig-arr i {
        font-size: 25px;
    }

.btn-rig-arr {
        border: none;
    }

.btn-rig-arr:hover {
        border: none !important;
    }

.foc-btn {
        background-color: white;
        border-radius: 24px;
    }

.foc-btn:hover {
        background-color: #dddddd;

}

.ai-txt {
        text-align: center;
    }

.search {
        margin: 20px 10px;
        background-color: #f2f2f2;
        min-height: 240px;
    }

.search-inp {
        border: none;
        width: 100%;
        height: 56px !important;
    }

.ai-med {
        font-size: 21px;
        position: relative;
        top: 5px;
    }
    .disclaimer div{
        padding: 0px;
    }
    .disclaimer p{
        padding-top: 10px;
        padding-left: 0px !important;
    }
    .chat-ans {
    height: 400px;
    overflow-y: auto;
    border: 3px solid #d1d1d1;
    border-radius: 11px;
    box-shadow: 0px 0px 15px #d1d8db;
}

.health-ai {
        text-align: center;
        color: rgba(0, 55, 119, 1);
    }

@media only screen and (max-width: 600px) {
        .health-ai {
            margin: 10px;
        }
        .disclaimer p{
        padding: 10px !important;
        
    }
        .ai-txt {
            display:none;
            margin: 10px;
        }

.foc-btn1 {
            margin-top: 10px;
        }

.search button {
            background-color: white;
            padding-left: 6px;
            padding-right: 6px;
            margin-left: 20px;
        }

.search-inp {
            width: 90%;
            margin-left: 15px;
        }

.copilot {
            width: 60%;
            margin-top: -80px;
            margin-left: 150px;
        }

.foc {
            width: 40%;
        }

.search {
            margin: 10px 10px;
            padding: 17px 0px;
        }

.chat-ans {
            margin-left: 5px !important;
            width: 97% !important;
            height: 450px;
        }

.mobiai-vid {
            width: 35%;
            margin-left: 30px;
        }

.rel-vid {
            margin-left: 10px;
            margin-top: 10px;
        }
    }

/* ----TOGGLE SWITCH---- */
    /* The switch - the box around the slider */
    .switch {
        font-size: 17px;
        position: relative;
        display: inline-block;
        width: 3.5em;
        height: 2em;
    }

/* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 25px;
        background-color: #fff;
        border: 1px solid #adb5bd;
        transition: .4s;
        border-radius: 30px;
        width: 52px;
    }

.slider:before {
        position: absolute;
        content: "";
        height: 21px;
        width: 21px;
        border-radius: 20px;
        left: 3px;
        bottom: 0.25em;
        background-color: #adb5bd;
        transition: .4s;
        top: 1px;
    }

input:checked+.slider {
        background-color: #e0e2e5;
        border: 1px solid #e0e2e5;
    }

input:focus+.slider {
        box-shadow: 0 0 1px #007bff;
    }

input:checked+.slider:before {
        transform: translateX(1.4em);
        background-color: #fff;
    }

/* -----------search------ */
    .search-ques h3 {
        text-align: center;
        /* color: rgba(0, 55, 119, 1); */
        color: white;
    }
    .ai-ic{
        background-color: white;
    border-radius: 5px;
    margin-right: 5px;
    padding: 2px;
    }

.inp-ques input {
        width: 100%;
        border-radius: 25px;
        padding: 10px;
    }

.inp-ques {
        background-color: white;
        padding: 10px;
        border-radius: 10px;
    }

button:focus,
    button:active {
        outline: none !important;
    }

.search-icon {
        position: absolute;
        top: 29%;
        right: 34px;
        transform: translateY(-50%);
        color: #0f0e0e;
        font-size: x-large;
        border: none;
        background-color: white;
        height: 35px;
        border-radius: 30%;
        padding-bottom: 38px !important;
    }

.clr-btn {
        border-radius: 20px;
        background-color: white;
        color: rgba(0, 55, 119, 1);
        font-size: 19px;
    }
    .dis-link{
        color: #009CD0;
    }
    .mo-dcl{
        display: none;
    }
    @media only screen and (max-width: 600px) {
        .clr-btn {
            margin-left: 10px;
        }
        .inp-ques{
            margin: 10px;
        }
        .search-icon {
            /* position: relative; */
            top: 30%;
        }
        .disclaimer{
            display: none;
        }
        .health-ai h4{
            display: none;
        }
        .med-gpt{
            margin-bottom: -41px;
            margin-top: 30px; 
        }
        .mo-dcl{
            display: block;
            float: right;
            color: white;
            margin-right: 15px;
            margin-top: 20px;
            font-size: 15px;
        }

}
</style>
<?php echo view('NewIncludes/Footer.php');?>