Hugging Face's logo

Spaces:
im1111
/
groqnote_dev
Sleeping

App Files Community
groqnote_dev
File size: 4,294 Bytes
26ab438
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
import { utils } from "./utils.js";
import { view } from "./view.js";


let config = {
    first_language: 'にほんご',
    second_language: 'English'
}



// Create toolbar element
const toolbar = document.createElement("div");
toolbar.id = "esl-toolbar";
toolbar.style.position = "fixed"; // Make it stick to the top
toolbar.style.top = "0"; // Position at the very top
toolbar.style.left = "0"; // Position at the leftmost side
toolbar.style.width = "100%"; // Make it span the entire width
toolbar.style.backgroundColor = "lightgray"; // Example background color
toolbar.style.padding = "10px"; // Add some padding

// Create buttons

const askButton = document.createElement("button");
askButton.id = "ask-btn";
askButton.textContent = "Ask";



const correctBtn = document.createElement("button");
correctBtn.id = "correct-btn";
correctBtn.textContent = "Correct";

const translateBtn = document.createElement("button");
translateBtn.id = "translate-btn";
translateBtn.textContent = "Translate";

const explainBtn = document.createElement("button");
explainBtn.id = "explain-btn";
explainBtn.textContent = "Explain";

const defineBtn = document.createElement("button");
defineBtn.id = "define-btn";
defineBtn.textContent = "Define";


const removeButton = document.createElement("button");
removeButton.id = "remove-btn";
removeButton.textContent = "Hide";

// Append buttons to toolbar
toolbar.appendChild(askButton);
toolbar.appendChild(correctBtn);
toolbar.appendChild(translateBtn);
toolbar.appendChild(explainBtn);
toolbar.appendChild(defineBtn);
toolbar.appendChild(removeButton);


// Create content area
const contentArea = document.createElement("div");
contentArea.id = "content";
contentArea.contentEditable = true; // Allow user to select text

// Append toolbar and content area to the body
document.body.appendChild(toolbar);
document.body.appendChild(contentArea);

// Function to get selected text
function getSelectedText() {
    return window.getSelection().toString();
}

// Implement functionalities for each button (same as before)

function ask(prompt) {

    let currentLineString = utils.getCurrentLineString(document.activeElement);
    let selectText = window.getSelection().toString();
    prompt=`${prompt} **${selectText.length >= 1 ? selectText : currentLineString}** `
    utils.displayMarkdown(prompt+'...');
    utils.AIComplete(prompt,{ 
        url: '/openai/v1/chat/completions',
        model: 'llama3-8b-8192',
        max_tokens:8000,
     });
}

askButton.addEventListener("click", () => {
    ask(' ');    

});


// Correct Button:
correctBtn.addEventListener("click", () => {
    ask('correct mistakes of the text: \n');
});

// Translate Button:
translateBtn.addEventListener("click", () => {
    ask(`translate to ${config.first_language}:\n `);
});

// Explain Button:
explainBtn.addEventListener("click", () => {
    ask('explain this for english seconds language learner in simple english:\n ');

});

// Define Button:
defineBtn.addEventListener("click", () => {
    ask('define the word , first in simple english , and give some usage example:\n '  )
    });

removeButton.addEventListener('click', () => toolbar.style.display = 'none')

// Style the toolbar
toolbar.style.position = "fixed";
toolbar.style.top = "0%";
toolbar.style.left = "0";
toolbar.style.width = "wrap-content";
toolbar.style.backgroundColor = "black"; // Light gray background
toolbar.style.padding = "5px";
toolbar.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; // Add a subtle shadow

// Style the buttons
const buttonStyles = {
    backgroundColor: "black", // Green background
    border: "none",
    color: "white",
    padding: "2px",
    textAlign: "center",
    textDecoration: "none",
    display: "inline-block",
    fontSize: "small",
    margin: "2px",
    cursor: "pointer",
    borderRadius: "5px", // Rounded corners
};

// Apply styles to each button
for (const button of [askButton, correctBtn, translateBtn, explainBtn, defineBtn, removeButton]) {
    Object.assign(button.style, buttonStyles);
    utils.makeButtonFeedback(button);
}



setTimeout(() => {
    utils.displayMarkdown(`
hello, this is note for language learner
code will display like this:
\`\`\`
this code
\`\`\`
    `)
view.createMenu(window.innerWidth*0.9, 300);

}, 1000);