Error uncaught typerror

[ejgutierrez74]

Uncaught TypeError: El especificador “ollama” era un especificador básico, pero no se reasignó a nada. Los especificadores de módulos relativos deben comenzar con “./”, “../” o “/”. ollamaCode.js:1:20
Uncaught SyntaxError: import declarations may only appear at top level of a module

Made npm i ollama ( perhaps before i made pnpm i ollama)
Im running llama3 llm in http://127.0.0.1:11434/ -> ollama is running
http://127.0.0.1:11434/chat and http://127.0.0.1:11434/api got 404 error
i have in terminal also running the ollama.

ollamaCode.js:

import ollama from 'ollama';

export async function getOllamaResponse() {
    const response = await ollama.chat({
        model: 'llama3',
        messages: [{role: 'user', content: 'Why is the sky blue?'}],
    });
    console.log(response.message.content);
    console.log("HOLA");
    return "hola";
}

getOllamaResponse();

chatboxscript.js

import {getOllamaResponse} from "./ollamaCode.js";

const chatbotSettings = {
    chatbotIconPath: "../img/chatbot/chatbot-icon.redimensionado.png",
    chatbotCloseIconPath: "../img/chatbot/close-icon.redimensionado.jpg",
    chatbotSendMessageIconPath: "../img/chatbot/send-button.redimensionado.png",
    chatbotMessageUserIcon: "../img/chatbot/usericons/customersupportman.redimensionado.png",
    chatbotMessageAssistantIcon: "../img/chatbot/assistanticons/robotassistant2.redimensionado.png",
    chatbotHeaderTitle: "Asistente de Caparrella",
    chatbotName: "CapaBot",
}

/** Configuración de la interfaz del chatbot */

function setChatbotSettings() {
    // Assuming the image has an ID attribute of "myImage"
    const imageIcon = document.getElementById("chat-icon");
    imageIcon.src = chatbotSettings.chatbotIconPath;

    // Assuming the image has an ID attribute of "myImage"
    const imageCloseIcon = document.getElementById("close-icon");
    imageCloseIcon.src = chatbotSettings.chatbotCloseIconPath;

    // Assuming the image has an ID attribute of "myImage"
    const imageSendMessageIcon = document.getElementById("send-button");
    imageSendMessageIcon.src = chatbotSettings.chatbotSendMessageIconPath;

    // Assuming the image has an ID attribute of "myImage"
    document.getElementById("chatbotTitle").innerHTML = chatbotSettings.chatbotHeaderTitle;

}

setChatbotSettings();


// Función para mostrar u ocultar el chat
function toggleChat() {
    const chatboxBody = document.getElementById("chatbox-body");
    if (chatboxBody.style.display === "none" || chatboxBody.style.display === "") {
        chatboxBody.style.display = "block";
        //Limpiar input text
    } else {
        chatboxBody.style.display = "none";
    }

}

function closeAssistant() {
    toggleChat();
}

// La versión moderna const closeAssistant = () => toggleChat();

// Función para manejar el presionar "Enter" en el input
const userInput = document.getElementById('user-input');

// Añade un listener para detectar cuando se presiona una tecla
userInput.addEventListener('keydown', function (event) {
    // Verifica si la tecla presionada es 'Enter' (código de tecla 13)
    if (event.key === 'Enter') {
        sendMessage();
    }
});


// Función para manejar el envío de mensajes
function sendMessage() {
    const userInput = document.getElementById("user-input").value;
    if (userInput.trim() !== "") {
        displayMessage(userInput, 'user');  // Muestra el mensaje del usuario
        document.getElementById("user-input").value = '';  // Limpia el campo de entrada
        getAssistantResponse(userInput);  // Obtiene la respuesta del asistente
    }
}


// Función para mostrar los mensajes en el chat
function displayMessage(message, sender) {
    const chatBoxMesages = document.getElementById("chat-messages");
    const messageElement = document.createElement("div");
    messageElement.classList.add("chat-messages", sender);

    let addHTML = '';
    if (sender === 'user') {
        messageElement.style.textAlign = "right";
        addHTML = ` <div class="message-text-user">User</div>
                    <div class="message-icon-user"><img src=${chatbotSettings.chatbotMessageUserIcon} alt="user-icon"></div>
                    <div class="message-text-user">${message}</div>`
    } else if (sender === 'assistant') {
        messageElement.style.textAlign = "left";
        addHTML = ` <div class="message-text-user">${chatbotSettings.chatbotName}</div>
                    <div class="message-icon-assistant"><img src=${chatbotSettings.chatbotMessageAssistantIcon} alt="user-assistant"></div>
                    <div class="message-text-assistant">${message}</div>`;
    } else {
        console.log("Error en el sender");
    }

    messageElement.innerHTML = addHTML;

    chatBoxMesages.appendChild(messageElement);
    chatBoxMesages.scrollTop = chatBoxMesages.scrollHeight;

}
/*
function getAssistantResponseStream(userMessage) {

    const message = {role: 'user', content: `${userMessage}`}
    const response = await ollama.chat({model: 'llama3.1', messages: [message], stream: true})
    for await (const part of response) {
        process.stdout.write(part.message.content)
    }
}
*/


/*
<div class="icon">${sender === 'user' ? '👤' : '🤖'}</div>
*/
// Función para obtener la respuesta del asistente usando la API de Ollama
function getAssistantResponse(userMessage) {
   const messageResponse = getOllamaResponse(userMessage);
   // const messageResponse ="hola";
    displayMessage(messageResponse, "assistant");
}

and html

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title></title>

    <link href="css/style.css" rel="stylesheet">
    <link href="css/chatbotstyle.css" rel="stylesheet">
    <meta content="" name="description">

    <meta content="" property="og:title">
    <meta content="" property="og:type">
    <meta content="" property="og:url">
    <meta content="" property="og:image">
    <meta content="" property="og:image:alt">

    <link href="/favicon.ico" rel="icon" sizes="any">
    <link href="/icon.svg" rel="icon" type="image/svg+xml">
    <link href="icon.png" rel="apple-touch-icon">

    <link href="site.webmanifest" rel="manifest">
    <meta content="#fafafa" name="theme-color">
    <!--
    Si usamos async para cargar la biblioteca "p5.js", el navegador ejecutará ese archivo inmediatamente cuando termine de cargarlo.
 That will make the variable p5 globally available. -->

    <script src="js/libraries/p5.min.js"></script>
    <script src="js/sketchpacman.js" type="module"></script>
    <script src="js/sketch.mjs" type="module"></script>
    <script src="js/secondsketch.mjs" type="module"></script>

    <script defer type="module" src="js/ollamaCode.js"></script>
    <script defer src="js/chatbotscript.js"></script>


    <!--    <script type="module" src="js/classes/Rectangle.mjs"></script>-->
</head>

<body>

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="sketch-pacman"></div>
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="first-sketch-holder"></div>
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="second-sketch-holder"></div>

<div id="chatbox-container">
    <!-- Icono de ayuda -->
    <input type="image" id="chat-icon" class="chat-icon" onclick="toggleChat()" alt="Icon of the Assistant"/>

    <!-- Ventana del chat -->
    <div id="chatbox-body" class="chatbox-body" >
        <!-- Header del chatbox -->
        <div class="chat-header">
            <span id="chatbotTitle"></span>
            <input type="image" id="close-icon" onclick="closeAssistant()" alt ="Button Close"/>
        </div>

        <!-- Mensajes del chatbox -->
        <div id="chat-messages" class="chat-messages" ></div>

        <!-- Div con el input text y boton enviar -->
        <div class="chat-input-container">
            <label for="user-input"></label>
            <input type="text" id="user-input" placeholder="Escribe tu mensaje..." />
            <input type="image" id="send-button" onclick="sendMessage()" alt ="Button send message"/>
        </div>
    </div>
</div>
</body>

</html>

`

Any help would be apreciated

I m developing on linux, with local webstorm server http://localhost:63342/, npm i ollama was 0.5.11....and llama3 is running in ollama server

chatbotscript.js fails if i put typemodule because toggleChat() error Reference, but the code is ok, i thin its related with ollama

Im a teacher on vocational education in computer science and we are stuck