I’m trying to make a AI integrated IDE in Electron js but I can’t use Monaco-Editor and Gemini Api at the same time
Here is The Codes:
HTML:
”’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>R-IDE</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
<section class="mainapp">
<nav style="-webkit-app-region: drag">
</nav>
<div id="main">
<div class="resizable" id="file-manager">
<button id="select-folder">Select Folder</button>
<div id="tree-container"></div>
</div>
<div class="resizer" id="handle-left" data-resize="left"></div>
<div class="resizable" id="code">
<label id="file-name">File Name</label>
<hr id="ayırac">
<div id="editor"></div>
</div>
<div class="resizer" id="handle-right" data-resize="center"></div>
<div class="resizable" id="chat">
<div id="chat-main">
</div>
<div id="prompt-main">
<textarea id="prompt"></textarea>
<button id="send"><img src="icons/Email Send.png"></button>
</div>
</div>
</div>
</section>
</body>
<script type="module" src="script.js"></script>
<script src="loader.js"></script>
<script type="module" src="chatScript.js"></script>
<script type="module" src="jsTreeScript.js"></script>
</html>
”’
jsTreeScript.js:
”’
const button=document.getElementById('select-folder')
button.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.webkitdirectory = true; // Klasör seçimi için
input.multiple = true; // Çoklu dosya seçimi için
input.click();
input.addEventListener('change', (event) => {
const files = Array.from(event.target.files);
const treeData = buildTreeData(files);
// jsTree'yi oluştur
$('#tree-container').jstree('destroy').jstree({
core: {
data: treeData
}
});
});
button.style.display="none";
});
// Dosya ve Klasör Yapısını Hiyerarşik Tree Data'ya Dönüştür
function buildTreeData(files) {
const tree = [];
files.forEach(file => {
const pathParts = file.webkitRelativePath.split('/');
let current = tree;
pathParts.forEach((part, index) => {
const existing = current.find(item => item.text === part);
if (!existing) {
const newNode = {
text: part,
state: { opened: true },
children: []
};
if (index === pathParts.length - 1 && !file.type.endsWith('/')) {
newNode.data = file; // Dosya nesnesini kaydet
}
current.push(newNode);
current = newNode.children;
} else {
current = existing.children;
}
});
});
return tree;
}
// jsTree Tıklama Olayını Dinleme
let uzantı="";
var editor;
window.addEventListener('resize', () => {
editor.layout(); // Pencere boyutu değiştiğinde editörü yeniden boyutlandırır
});
$('#tree-container').on('select_node.jstree', (e, data) => {
const file = data.node.data;
const label=document.getElementById("file-name");
label.textContent=data.node.text;
const dotIndex = data.node.text.lastIndexOf('.');
// Eğer nokta bulunursa, noktadan sonrasını döndür
if (dotIndex !== -1) {
uzantı= data.node.text.substring(dotIndex + 1); // Noktadan sonrasını al
switch(uzantı){
case "js":
uzantı="javascript"
break;
case "py":
uzantı="python"
break;
case "cs":
uzantı="csharp"
break;
case "rb":
uzantı="ruby"
break;
case "ts":
uzantı="typescript"
break;
case "rs":
uzantı="rust"
break;
case "md":
uzantı="markdown"
break;
case "kt":
uzantı="kotlin"
break;
case "kts":
uzantı="kotlin"
break;
case "txt":
uzantı="plaintext"
break;
default:
uzantı=uzantı
break;
}
}
else{
uzantı= '';
textarea.value="File can't be loaded"
}
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
if(editor==null){
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' } });
require(['vs/editor/editor.main'], function () {
monaco.editor.defineTheme('solarized-light', {
base: 'vs',
inherit: true,
rules: [
{ token: '', foreground: '586e75', background: 'e8e8e8' },
{ token: 'comment', foreground: 'ABABAB' },
{ token: 'keyword', foreground: '859900' },
{ token: 'string', foreground: '2aa198' }
],
colors: {
'editor.background': '#e8e8e8'
}
});
editor = monaco.editor.create(document.getElementById('editor'), {
value: event.target.result,
language: uzantı,
theme: 'vs-light',
});
monaco.editor.setTheme("solarized-light")
});
}
else{
const model = monaco.editor.createModel(event.target.result, uzantı);
editor.setModel(model);
}
}
reader.onerror = () => {
textarea.value="File can't be loaded"
};
reader.readAsText(file); // Dosyanın içeriğini oku
}
});
”’
chatScript.js:
”’
const { GoogleGenerativeAI } = require("@google/generative-ai");
const genAI = new GoogleGenerativeAI("myAPIKEY");
let history=[
]
const sendbtn=document.getElementById("send");
sendbtn.addEventListener("click", ()=>{
const messageDiv = document.createElement("div");
messageDiv.classList.add("outgoing");
messageDiv.innerText = prompttext.value;
messagesContainer.appendChild(messageDiv);
history.push({role: "user", parts:[{text: prompttext.value}]})
console.log(history)
run()
})
const prompttext=document.getElementById("prompt");
const messagesContainer=document.getElementById("chat-main")
async function run() {
// The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});
const chat = model.startChat({
history,
generationConfig: {
maxOutputTokens: 100,
},
});
const result = await chat.sendMessage(prompttext.value);
prompttext.value=""
const response = await result.response;
const text = response.text();
history.push({role: "model", parts:[{text: text}]})
const messageDiv = document.createElement("div");
messageDiv.classList.add("incoming");
messageDiv.innerText = text;
messagesContainer.appendChild(messageDiv);
}
”’
Those are my files Monaco-Editor is working but the gemini api gives this error:
Uncaught Error: Check dependency list! Synchronous require cannot resolve module ‘@google/generative-ai’. This is the first mention of this module!
at c.synchronousRequire (loader.js:8:6342)
at r (loader.js:9:2065)
at chatScript.js:1:32
But when I delete the loader.js file the Gemini Api works but Monaco-Editor doesn’t
What should I do, Thanks.