I made a web interface by myself, so that it will be convenient to integrate with other components in the future and fully unleash the potential of LLM Models.

All these powerful Large Language Models are already available, but the fact is that the best answers cannot come from the same model. We only want the best answer to each question, so each question is simultaneously tried with all available tools, and the best answer is edited and organized before it is saved in the database.
Next, we will use Large Language Models to analyze the data and provide appropriate keywords for the content, replacing mechanized full-text searches. If we want to achieve full automation, we must consider handing over the execution code to the Large Language Models, allowing them to train themselves to complete tasks. But this must be done under controllable conditions, starting with the simplest tasks first.
The NEO J51-C8 is just a mini computer. I added RAM to it and now it has 40GB of RAM. When I first started using it, it could only load 7B models and had a speed of 0.2 tokens per second. First try, using quantization, and running 13B models on Windows without any acceleration, it has a speed of less than 0.1 tokens per second.Now, I have installed Debian 12 on WSL and am using Python 3.11. It seems to have some acceleration, running Vicuna 33B models is 5 times bigger than 7B,but still faster.

Do you have to understand everything before you start doing it? If that's the case, then there's no need to do anything at all. If you want to learn something, just start doing it and only after you've produced something can you say that you've entered the realm of competency.
After several days of effort, I finally achieved a satisfactory result. HTML and CSS were relatively simple, while Python used my own components, FileDict3 and FileSQL3, totaling around 700 lines of code. However, because the components were tested, the assembly process went smoothly. Using FastAPI + Pydantic to handle JSON was very convenient, with few opportunities for errors.
The JavaScript code was around 300 lines, and this was the most challenging part. Since I only used Pydroid3 to handle JavaScript without auto-completion, syntax errors frequently appeared. At this point, AI tools were very effective. The key was to stick to my design and keep the task given to AI as simple as possible. Each function required compliance with naming conventions, making it easy to understand its purpose. Any code should also be easy to read, making it easy to find solutions if errors occur.
During the process, I found it very interesting to use JavaScript fetch to communicate with JSON and to interact with FastAPI + Pydantic. This made it easy to complete various functions and to maintain them easily.

FastAPI +Pydantic make everything simple.

Not yet settled, but gradually improving step by step. Each function is being added according to my own ideas and gradually improved during use. Every time I solve a problem successfully on my own, it gives me a sense of achievement and encourages me to keep moving forward.

I made a web interface by myself, so that it will be convenient to integrate with other components in the future and fully unleash the potential of LLM Models.
Although it may seem simple, it took me the whole day to complete it because I am not very familiar with JavaScript. At first, I was misled by AI, which made it complicated. The JavaScript code it generated used a lot of anonymous functions, which I couldn't understand at all. Later on, I persisted in my own design, starting with the simplest elements and gradually approaching the desired outcome. The key was to prevent AI from generating anonymous functions, so that the code would be easy to read and modify, and I quickly finished it.
Why did I have to write it myself? Because only by doing so can I safely follow my own ideas and integrate them with other powerful components. When various components have the direction of LLM, the results produced exceed simple addition, and the ultimate goal is to achieve multiplication.
Only through the process of using it can I truly learn useful knowledge. This time, I learned how to make FastAPI+pydantic,+JavaScript+ HTML work together.
I didn't use any JavaScript frameworks. During the implementation process, I encountered many unexpected problems. Solving all these problems is necessary to accomplish the task. As long as I am careful and willing to try, any problem can be solved. Confidence comes from successfully solving problems.
Actually, the database component was already completed earlier and has been tested and used for a while, proving its stability and reliability. Now the first thing to do is to integrate it with the database and efficiently handle various generated results.

I can add something when I meed.

Markdown, HTML and Text,LLM on my Android phone.

const url_chat = "/chat";
const url_delete = "/delete";
const url_save = "/save";
const url_stop = "/stop";
const url_get = "/get";
const url_regen = "/regen";
const url_search = "/search";
const question = document.getElementById("question");
const searchValue = document.getElementById("search");
const inputHTML = document.getElementById("inputHTML");
const outputHTML = document.getElementById("outputHTML");
const chatContainer = document.getElementById("chatContainer");
hljs.initHighlightingOnLoad();
 hljs.highlightAll();
var Handling = {
    token: "current",
    finished: true,
    answer: "",
    question:""
};
var inputMode = "text";
var outputMode = "text";

//    question.scrollIntoView({block: 'center', behavior: 'smooth'});
//    outputHTML.scrollIntoView({block: 'center', behavior: 'smooth'});
//  chatContainer.scrollIntoView({block: 'center', behavior: 'smooth'});



function generate_token(length) {
    const allowed_characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
    let token = "";
    for (let i = 0; i < length; i++) {
        const j = Math.floor(Math.random() * allowed_characters.length);
        token += allowed_characters.charAt(j);
    }
    token=question.value.trim();
    return token;
}


function postJson(url, data, callback) {
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: data
    })
    .then(function (response) {
        return response.json();
    }).then(function (data) {
        responseReceived(data, callback);
    }).catch(function (error) {
        console.log(error);
    });
}

function responseReceived(data, callback) {
    if (callback) {
        callback(data);
    } else {
        console.log(data);
    }
}




function diaplayOutput(){
if (outputMode == "HTML") {
            outputHTML.innerHTML = Handling.answer;
        }
        
        if (outputMode == "markdown") {
            outputHTML.innerHTML = marked.parse(Handling.answer);
            hljs.highlightAll();
      
            
        }
        
        if (outputMode == "text") {
            outputHTML.innerText = Handling.answer;
        }

}

function diaplayInput(){
if (inputMode == "HTML") {
            inputHTML.innerHTML = question.value.trim();
        }
        
        if (inputMode == "markdown") {
            inputHTML.innerHTML = marked.parse(question.value.trim());
        }
        
        if (inputMode == "text") {
            inputHTML.innerText = question.value.trim();
        }

}




function handleResponse(response) {
    if (!response.error) {
        Handling.answer = response.answer;
        diaplayOutput();
        
        chatContainer.scrollTop = chatContainer.scrollHeight;
        Handling.token = response.token;
        if (response.finished) {
            Handling.finished = true;
            
            return;
        } else {
            setTimeout(getResponse, 1000);
        }
    } else {
        setTimeout(getResponse, 1000);
        Handling.finished = true;
        Handling.token = "";
    }
}

function getResponse() {
    
    let url = url_get;
    let data = JSON.stringify({ "token": Handling.token });
    postJson(url, data, handleResponse);
}

function displayText() {
    outputMode = "text";
    outputHTML.innerText = Handling.answer;
}

function displayHTML() {
    outputMode = "HTML";
    outputHTML.innerHTML = Handling.answer;
}

function displayMarkdown() {
   outputMode = "markdown";
    outputHTML.innerHTML = marked.parse(Handling.answer);
    replaceCodeWithDiv();
}
function displayEditor() {
if (inputMode != "editor") {
     diaplayInput();
    Handling.question = question.value.trim();   
    inputMode = "editor";
    alert("Editing the answer");
    question.value = Handling.answer;
} else {
    Handling.answer = question.value.trim();
    question.value = Handling.question;
    alert("Now in text mode");
    inputMode = "text";
    diaplayInput();
    diaplayOutput(); 
}
}



function answerEditor() {
    displayEditor();
}

function displayText1() {
    inputMode = "text";
    inputHTML.innerText = question.value;
}

function displayHTML1() {
    inputMode = "HTML";
    inputHTML.innerHTML = question.value;
}

function displayMarkdown1() {
    inputMode = "markdown";
    inputHTML.innerHTML = marked.parse(question.value);
}
function messageCallback (response) {
        if(response.finished){
        
        getResponse();
        
        
        }
        else {
            Handling.finished = false;
            alert("Generating.")
            getResponse();}
    }





function sendMessage() {
    const message = question.value.trim();
    if (!message) {
        return;
    }
    Handling.token = question.value.trim();
    Handling.question = question.value.trim();
    diaplayInput();
    let data = JSON.stringify({ "question": message, "token": Handling.token });
    postJson(url_chat, data, handleResponse);
} 
function alertMessage(response) {
    if (!response.error) {
    Handling.finished = true;
    Handling.token = "";
        alert(response.answer);
    }
}

function stopChat() {
    let data = JSON.stringify({  "token": Handling.token });
    postJson(url_stop, data, alertMessage);
}
function handleLoad(result){
if (inputMode == "editor") {
displayEditor();}
question.value =  result.trim();
sendMessage();
outputHTML.scrollIntoView({block: 'center', behavior: 'smooth'});

}
function handleSearch(response){
if (!response.error) {
chatContainer.scrollIntoView({block: 'center', behavior: 'smooth'});
    alert(response.answer);    
    let results=response.results;
    listSelector(results);
    
    }
}




function searchQuestion() {
    let qr=searchValue.value;
    let data = JSON.stringify({  
    "querry" : qr ,
    "database" : "QA"});
    postJson(url_search,data, handleSearch);
    chatContainer.scrollIntoView({block: 'center', behavior: 'smooth'});
}




function resetInput() {
    inputHTML.innerHTML = "";
    question.value = "";
    outputHTML.innerHTML = "";
    chatContainer.innerHTML = "";
    question.scrollIntoView({block: 'center', behavior: 'smooth'});
}

function saveConvercation() {
    if (inputMode == "editor") {
        answerEditor();    
    }
    let data = JSON.stringify({ 
        "question": question.value.trim(), 
        "answer": Handling.answer    
    });
    postJson(url_save, data, alertMessage);
}

function deleteConvercation() {
    Handling.token = question.value.trim();
    let data = JSON.stringify({  "token": Handling.token });
    postJson(url_delete, data, alertMessage);
}

function regenReply() {
    token=question.value.trim();
    Handling.token = question.value.trim();
    let data = JSON.stringify({ 
    "question":token , 
    "token": Handling.token });
    postJson(url_regen, data, alertMessage);
    Handling.finished = false;
    Handling.answer="";
    getResponse();
    outputHTML.scrollIntoView({block: 'center', behavior: 'smooth'});
}

function listSelector(list, callback=handleLoad, target = chatContainer) {
  target.innerHTML = ''; 

  list.forEach((item) => {
    const container = document.createElement('div');
    container.innerHTML = item.slice(0, 200); 
    container.classname="character";
    const loadBtn = document.createElement('button');
    loadBtn.innerHTML = 'Load';
    loadBtn.addEventListener('click', () => {
      callback(item); 
    });
    container.appendChild(loadBtn);
    target.appendChild(container);
  });
}