Spaces:

Futuresony
/

FuturesonyAi

Running

App Files Files Community

Futuresony commited on Dec 12, 2024

Commit

4dc0d27

verified ·

1 Parent(s): 4f2372e

Update app.py

Browse files

Files changed (1) hide show

app.py +1 -525

app.py CHANGED Viewed

@@ -8,529 +8,6 @@ app = Flask(__name__)
 # Initialize the Hugging Face Inference Client
 client = InferenceClient("Futuresony/future_ai_12_10_2024.gguf")
-# HTML template for the app
-HTML_TEMPLATE = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <base href="javascript:" />
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Enhanced Flask Chat Interface with Call Feature</title>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap">
-    <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 90vh;
-            margin: 0;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        }
-        #chat-container {
-            width: 1500%;
-            max-width: 800px;
-            background-color: rgba(255, 255, 255, 0.95);
-            padding: 25px;
-            border-radius: 20px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-            display: flex;
-            flex-direction: column;
-            height: 90vh;
-            position: relative;
-            backdrop-filter: blur(10px);
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        }
-        #chatbox {
-            flex: 1;
-            overflow-y: auto;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border-radius: 15px;
-            font-size: 16px;
-            margin-bottom: 20px;
-            scroll-behavior: smooth;
-            height: 90vh;
-        }
-        #chatbox .message {
-            padding: 12px 16px;
-            border-radius: 15px;
-            margin-bottom: 15px;
-            word-wrap: break-word;
-            font-size: 16px;
-            max-width: 80%;
-            clear: both;
-            position: relative;
-            animation: fadeIn 0.3s ease-in-out;
-        }
-        #chatbox .user {
-            background-color: #007bff;
-            color: white;
-            float: right;
-            border-bottom-right-radius: 5px;
-        }
-        #chatbox .ai {
-            background-color: #e9ecef;
-            color: #333;
-            float: left;
-            border-bottom-left-radius: 5px;
-        }
-        #user-input-container {
-            position: relative;
-            display: flex;
-            align-items: center;
-            padding: 15px;
-            flex-wrap: wrap;
-        }
-        #user-input {
-            flex: 1;
-            padding: 12px 15px;
-            border: none;
-            border-radius: 10px;
-            font-size: 16px;
-            background-color: white;
-            transition: all 0.3s ease;
-            padding-right: 45px;
-        }
-                #user-input:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px #007bff33;
-        }
-        button {
-            padding: 12px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        button:hover {
-           background-color: #0056b3;
-           transform: translateY(-2px);
-        }
-        .mic-icon, .call-icon {
-            font-size: 24px;
-            cursor: pointer;
-            color: #555;
-            transition: all 0.3s ease;
-            padding: 8px;
-            border-radius: 50%;
-        }
-        .mic-icon:hover, .call-icon:hover {
-        }
-        #call-ui {
-            display: none;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: white;
-            padding: 30px;
-            border-radius: 20px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            text-align: center;
-            z-index: 1000;
-        }
-        #call-ui p {
-            font-size: 18px;
-            margin: 15px 0;
-            color: #333;
-        }
-        #timer {
-            font-size: 24px;
-            font-weight: bold;
-            color: #007bff;
-            margin-top: 15px;
-        }
-        .bottom-icons {
-            display: flex;
-            justify-content: center;
-            gap: 15px;
-            position: absolute;
-            bottom: 1px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        .call-icon {
-            color: green;
-        }
-        }
-        .icons, .navigation {
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            margin-top: 5px;
-        }
-        .navigation {
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            margin-left: 10px;
-            font-size: 14px;
-            color: #666;
-        }
-        .navigation span {
-            padding: 0 5px;
-        }
-.status-dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    background-color: green; /* Online indicator color */
-    border-radius: 50%;
-    margin-right: 5px;
-}
-@keyframes typingAnimation {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
-}
-.typing-dot {
-    width: 8px;
-    height: 8px;
-    background-color: #007bff;
-    border-radius: 50%;
-    display: inline-block;
-    animation: typingAnimation 1s infinite ease-in-out;
-    margin-right: 5px;
-}
-.typing-dot:nth-child(2) {
-    animation-delay: 0.2s;
-}
-.typing-dot:nth-child(3) {
-    animation-delay: 0.4s;
-}
-        #chatbox::-webkit-scrollbar {
-            width: 8px;
-        }
-        #chatbox::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 4px;
-        }
-        #chatbox::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 4px;
-        }
-    </style>
-</head>
-<body>
-<div id="chat-container">
-    <div class="header">
-        <h1>Chat Assistant</h1>
-        <div class="status-indicator">
-            <span class="status-dot"></span>
-            Online
-        </div>
-    </div>
-    <div id="chatbox">
-        <div id="typing-indicator" style="display: none;">
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-        </div>
-    </div>
-    <div id="user-input-container">
-        <input type="text" id="user-input" placeholder="Type your message here..." />
-        <span class="material-icons send-icon" onclick="sendMessage()">send</span>
-    </div>
-    <div class="bottom-icons">
-        <span class="material-icons mic-icon" id="mic-icon">mic</span>
-        <span class="material-icons call-icon" id="call-icon">call</span>
-    </div>
-</div>
-    <script>
-    let isRecording = false;
-    let recognition;
-    let responsesHistory = {}; // Holds all responses per prompt
-    let currentIndex = {};     // Track current response index
-    function initSpeechRecognition() {
-        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        recognition = new SpeechRecognition();
-        recognition.lang = 'en-US';
-        recognition.interimResults = false;
-        recognition.maxAlternatives = 1;
-        recognition.onresult = function(event) {
-            const transcript = event.results[0][0].transcript;
-            sendMessageFromVoice(transcript);
-        };
-        recognition.onerror = function(event) {
-            console.log("Speech recognition error:", event.error);
-        };
-    }
-    const micIcon = document.getElementById('mic-icon');
-    micIcon.addEventListener('mousedown', function() {
-        isRecording = true;
-        micIcon.textContent = 'mic_off';
-        recognition.start();
-    });
-    micIcon.addEventListener('mouseup', function() {
-        isRecording = false;
-        micIcon.textContent = 'mic';
-        recognition.stop();
-    });
-    function appendMessage(text, className) {
-        let chatbox = document.getElementById('chatbox');
-        let messageDiv = document.createElement('div');
-        messageDiv.className = 'message ' + className;
-        messageDiv.innerHTML = text;
-        chatbox.appendChild(messageDiv);
-        chatbox.scrollTop = chatbox.scrollHeight;
-    }
-    function sendMessageFromVoice(message) {
-        appendMessage(message, 'user');
-        fetchMessageFromAI(message);
-    }
-    function sendMessage() {
-        let userInput = document.getElementById('user-input');
-        let message = userInput.value.trim();
-        if (message === '') return;
-        appendMessage(message, 'user');
-        userInput.value = '';
-        fetchMessageFromAI(message);
-    }
-function fetchMessageFromAI(message) {
-    document.getElementById('typing-indicator').style.display = 'flex';
-    fetch('/message', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ text: message })
-    })
-    .then(response => {
-        if (!response.ok) {
-            throw new Error(`Server error: ${response.statusText}`);
-        }
-        return response.json();
-    })
-    .then(data => {
-        document.getElementById('typing-indicator').style.display = 'none';
-        if (data.response) {
-            addAIResponse(data.response, message);
-        } else {
-            console.error("No response from the server.");
-        }
-    })
-    .catch(error => {
-        document.getElementById('typing-indicator').style.display = 'none';
-        console.error('Error:', error);
-        appendMessage("An error occurred. Please try again later.", 'ai');
-    });
-}
-function addAIResponse(responseText, userPrompt) {
-        const responseId = Date.now();
-        responsesHistory[responseId] = [responseText];
-        currentIndex[responseId] = 0;
-        renderAIResponse(responseText, responseId, userPrompt);
-    }
-function renderAIResponse(responseText, responseId, userPrompt) {
-        let chatbox = document.getElementById('chatbox');
-        let messageDiv = document.createElement('div');
-        messageDiv.className = 'message ai';
-        messageDiv.dataset.responseId = responseId;
-        messageDiv.dataset.userPrompt = userPrompt; // Store the prompt
-        let responseTextDiv = document.createElement('div');
-        responseTextDiv.className = 'response-text';
-        responseTextDiv.innerHTML = responseText;
-        messageDiv.appendChild(responseTextDiv);
-        let iconsDiv = document.createElement('div');
-        iconsDiv.className = 'icons';
-        let speakerIcon = document.createElement('span');
-        speakerIcon.className = 'material-icons';
-        speakerIcon.innerText = 'volume_up';
-        speakerIcon.onclick = () => speakText(responseId);
-        let copyIcon = document.createElement('span');
-        copyIcon.className = 'material-icons';
-        copyIcon.innerText = 'content_copy';
-        copyIcon.onclick = () => copyResponse(responseId);
-        let regenerateIcon = document.createElement('span');
-        regenerateIcon.className = 'material-icons';
-        regenerateIcon.innerText = 'replay';
-        regenerateIcon.onclick = () => regenerateResponse(responseId, responseTextDiv, iconsDiv);
-        iconsDiv.appendChild(speakerIcon);
-        iconsDiv.appendChild(copyIcon);
-        iconsDiv.appendChild(regenerateIcon);
-        messageDiv.appendChild(iconsDiv);
-        chatbox.appendChild(messageDiv);
-        chatbox.scrollTop = chatbox.scrollHeight;
-    }
-    function regenerateResponse(responseId, responseTextDiv, iconsDiv) {
-        responseTextDiv.innerHTML = 'Generating new response...';
-        // Get the original prompt from the dataset
-        const messageDiv = document.querySelector(`[data-response-id="${responseId}"]`);
-        const originalPrompt = messageDiv.dataset.userPrompt;
-        fetch('/message', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ text: originalPrompt }) // Use the original prompt
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.response) {
-                responsesHistory[responseId].push(data.response);
-                currentIndex[responseId] = responsesHistory[responseId].length - 1;
-                displayUpdatedResponse(responseId, data.response, iconsDiv);
-            } else {
-                responseTextDiv.innerHTML = 'Error generating response';
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            responseTextDiv.innerHTML = 'Error generating response';
-        });
-    }
-    function displayUpdatedResponse(responseId, newResponse, iconsDiv) {
-        let messageDiv = document.querySelector(`[data-response-id="${responseId}"]`);
-        let responseTextDiv = messageDiv.querySelector('.response-text');
-        responseTextDiv.innerHTML = newResponse;
-        // Remove existing navigation if present
-        const existingNav = messageDiv.querySelector('.navigation');
-        if (existingNav) {
-            existingNav.remove();
-        }
-        let navigationDiv = document.createElement('div');
-        navigationDiv.className = 'navigation';
-        iconsDiv.appendChild(navigationDiv);
-        let backIcon = document.createElement('span');
-        backIcon.className = 'material-icons';
-        backIcon.innerText = 'arrow_back';
-        backIcon.onclick = () => navigateResponse(responseId, -1, responseTextDiv, navigationDiv);
-        let nextIcon = document.createElement('span');
-        nextIcon.className = 'material-icons';
-        nextIcon.innerText = 'arrow_forward';
-        nextIcon.onclick = () => navigateResponse(responseId, 1, responseTextDiv, navigationDiv);
-        let responseIndexText = document.createElement('span');
-        responseIndexText.className = 'response-index';
-        navigationDiv.appendChild(backIcon);
-        navigationDiv.appendChild(responseIndexText);
-        navigationDiv.appendChild(nextIcon);
-        updateResponseIndex(responseId, responseIndexText);
-    }
-    function navigateResponse(responseId, direction, responseTextDiv, navigationDiv) {
-        currentIndex[responseId] += direction;
-        currentIndex[responseId] = Math.max(0, Math.min(currentIndex[responseId], responsesHistory[responseId].length - 1));
-        responseTextDiv.innerHTML = responsesHistory[responseId][currentIndex[responseId]];
-        updateResponseIndex(responseId, navigationDiv.querySelector('.response-index'));
-    }
-    function updateResponseIndex(responseId, responseIndexText) {
-        responseIndexText.innerText = `${currentIndex[responseId] + 1}/${responsesHistory[responseId].length}`;
-    }
-    // Updated function to speak the current response
-    function speakText(responseId) {
-        const text = responsesHistory[responseId][currentIndex[responseId]];
-        const utterance = new SpeechSynthesisUtterance(text);
-        speechSynthesis.speak(utterance);
-    }
-    // Updated function to copy the current response
-    function copyResponse(responseId) {
-        const text = responsesHistory[responseId][currentIndex[responseId]];
-        navigator.clipboard.writeText(text);
-        alert("Copied: " + text);
-    }
-    document.addEventListener('DOMContentLoaded', initSpeechRecognition);
-</script>
-</body>
-</html>
-"""
 @app.route("/")
 def home():
     return HTML_TEMPLATE
@@ -571,5 +48,4 @@ function fetchMessageFromAI(message) {
 if __name__ == "__main__":
     # Use PORT environment variable or default to 7860
     port = int(os.getenv("PORT", 7860))
-    app.run(host="0.0.0.0", port=port)

 # Initialize the Hugging Face Inference Client
 client = InferenceClient("Futuresony/future_ai_12_10_2024.gguf")
 @app.route("/")
 def home():
     return HTML_TEMPLATE
 if __name__ == "__main__":
     # Use PORT environment variable or default to 7860
     port = int(os.getenv("PORT", 7860))
+    app.run(host="0.0.0.0", port=port)