Skip to content

Implement AI Pay as an alternative to providing an API Key #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Marchusness wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Implement AI Pay as an alternative to providing an API Key #2

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14e4762
Implement AI Pay as an alternative to providing an API Key
Marchusness Mar 22, 2024
9e48bca
copy suggestions
MarcoWorms Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 132 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='ai-pay-website-identifier'
content='{"websiteId":"vjZ10kZMMec6LJwGN1Cs","websiteName":"RefactorGPT","websiteDescription":"Helps you put all code from a GitHub repo into GPT context to then do whatever you want from it (refactor, rewrite in another language, create tests or docs)","recommendedCredit":10,"requestUsageOnPageLoad":true}'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RefactorGPT</title>
Expand All @@ -13,7 +15,8 @@
.indent {
margin-left: 20px;
}
button {

button, #ai-pay-link {
background-color: darkslateblue;
border: none;
color: white;
Expand Down Expand Up @@ -57,25 +60,45 @@ <h2>Merged Files Preview:</h2>
<br />
<br />
<h2>Instruction:</h2>
<textarea id="instruction" name="instruction" rows="20" cols="80" placeholder="rewrite this entire application" required></textarea>
<textarea id="instruction" name="instruction" rows="20" cols="80" placeholder="rewrite this entire application"
required></textarea>
<br />

<div id="ai-provider-details" style="display: flex; align-items: center; justify-content: space-between;">

<a
id="ai-pay-link"
href="https://chromewebstore.google.com/detail/ai-pay/igghgdjfklipjmgldcdfnpppgaijmhfg"
target="_blank">Use AI Pay</a>

<p>OR</p>

<div>
<label style="font-weight: bold;" for="openai-key">Use your own OpenAI Key:</label>
<input style="max-width:500px;margin:0 10px;padding: 11px;" type="password" id="openai-key" name="openai-key">
<button id="save-api-key">Save Key</button>
</div>

</div>

<div id="active-ai-pay-session" style="display: none; align-items: center; justify-content: center;">
<p>AI Pay session is active</p>
</div>

<div style="display: flex; align-items: center; justify-content: space-between;">

<div>
<label for="models">Select Model:</label>
<select id="models" name="models">
<option>gpt-4-turbo-preview/option>
<option>gpt-4-turbo-preview</option>
<option>gpt-3.5-turbo</option>
</select>
</div>

</div>
<div style="display: flex; align-items: center;">
<button id="send-to-openai" style="margin-right: 10px">Refactor!!!</button>
<label style="font-weight: bold;" for="openai-key">OpenAI Key:</label>
<input style="max-width:500px;margin:0 10px;padding: 11px;" type="password" id="openai-key" name="openai-key">
<button id="save-api-key">Save Key</button>
</div>

<button id="send-to-openai" style="margin-right: 10px">Refactor!!!</button>

<br />
<h2>OpenAI Response:</h2>
<textarea id="openai-response" rows="20" cols="80" readonly></textarea>
Expand All @@ -84,12 +107,79 @@ <h2>OpenAI Response:</h2>
<br />

<script>
let aiPaySessionId = document.body.getAttribute('AI_PAY_SESSION_ID_DATA_ELEMENT_ID');
let isBrowserExtensionInstalled = !!document.body.getAttribute('IS_AI_PAY_INSTALLED_ELEMENT_ID');
let sessionState = aiPaySessionId ? 'active' : 'inactive';

const aiProviderDetails = document.getElementById('ai-provider-details');
const aiPayLink = document.getElementById('ai-pay-link');
const aiPayActiveSession = document.getElementById('active-ai-pay-session');

function updateUiWithSessionState() {
if (!isBrowserExtensionInstalled) {
aiProviderDetails.style.display = 'flex';
aiPayActiveSession.style.display = 'none';
aiPayLink.innerText = 'Use AI Pay';
aiPayLink.href = 'https://chromewebstore.google.com/detail/ai-pay/igghgdjfklipjmgldcdfnpppgaijmhfg';
return
}

if (sessionState !== 'active') {
aiProviderDetails.style.display = 'flex';
aiPayActiveSession.style.display = 'none';
aiPayLink.innerText = 'Learn how to start an AI Pay session';
aiPayLink.href = 'https://www.joinaipay.com/welcome';
return
}

aiProviderDetails.style.display = 'none';
aiPayActiveSession.style.display = 'flex';
}

updateUiWithSessionState();

window.addEventListener('AI_PAY_SESSION_DATA_CHANGE', (event) => {
if (!event.detail) return;

if (event.detail.sessionId && event.detail.sessionId !== aiPaySessionId) {
isBrowserExtensionInstalled = true;
aiPaySessionId = event.detail.sessionId;
sessionState = 'active';
updateUiWithSessionState();
} else if (!event.detail.sessionId && aiPaySessionId) {
isBrowserExtensionInstalled = true;
aiPaySessionId = null;
sessionState = 'inactive';
updateUiWithSessionState();
}
});
window.addEventListener('AI_PAY_BROWSER_EXTENSION_INSTALLED', () => {
if (!isBrowserExtensionInstalled) {
isBrowserExtensionInstalled = true;
updateUiWithSessionState();
}
});

function fetchGithub(url) {
return fetch(url, {
headers: {
// 'Authorization': 'Bearer <Your Token>',
}
})
}

document.getElementById('repo-form').addEventListener('submit', async (event) => {
event.preventDefault();
const repoUrl = document.getElementById('repo-url').value.split('github.com/')[1];
const apiUrl = `https://api.github.com/repos/${repoUrl}/contents`;
let repoUrl = document.getElementById('repo-url').value.split('github.com/')[1];
let path = ""
if (repoUrl.split('/').length > 2) {
path = repoUrl.split('/').slice(4).join('/');
repoUrl = repoUrl.split('/').slice(0, 2).join('/');
}
const apiUrl = `https://api.github.com/repos/${repoUrl}/contents/${path}`;
console.log(apiUrl);
try {
const response = await fetch(apiUrl);
const response = await fetchGithub(apiUrl);
if (!response.ok) {
throw new Error('GitHub API request failed');
}
Expand Down Expand Up @@ -127,7 +217,7 @@ <h2>OpenAI Response:</h2>

if (file.type === 'dir') {
try {
const response = await fetch(file.url);
const response = await fetchGithub(file.url);
if (!response.ok) {
throw new Error('GitHub API request failed');
}
Expand Down Expand Up @@ -161,7 +251,7 @@ <h2>OpenAI Response:</h2>
if (checkbox.checked && checkbox.getAttribute('data-type') === 'file') {
const fileUrl = checkbox.getAttribute('data-url');
try {
const response = await fetch(fileUrl);
const response = await fetchGithub(fileUrl);
if (!response.ok) {
throw new Error('GitHub API request failed');
}
Expand All @@ -183,8 +273,8 @@ <h2>OpenAI Response:</h2>

document.getElementById('send-to-openai').addEventListener('click', async () => {
const apiKey = localStorage.getItem('openai-api-key') || document.getElementById('openai-key').value;
if (!apiKey) {
alert('Please enter an API key.');
if (!aiPaySessionId && !apiKey) {
alert('Start an AI Pay session or enter an API key.');
return;
}
const instruction = document.getElementById('instruction').value;
Expand All @@ -200,22 +290,34 @@ <h2>OpenAI Response:</h2>
sendToOpenAIButton.disabled = true;
sendToOpenAIButton.textContent = 'Loading...';

const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
},
body: JSON.stringify({
model: model,
messages: messages,
temperature: 0,
}),
});
const baseUrl = aiPaySessionId ? 'https://api.joinaipay.com/api/openai-compatible' : 'https://api.openai.com/v1';

try {
const response = await fetch(baseUrl + "/chat/completions", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${aiPaySessionId ?? apiKey}`,
},
body: JSON.stringify({
model: model,
messages: messages,
temperature: 0,
}),
});

const body = await response.json();

const completion = await response.json();
openaiResponseTextarea.value = completion.choices[0].message.content;
if (!response.ok) {
console.error(body)
throw new Error('OpenAI API request failed');
}

openaiResponseTextarea.value = body.choices[0].message.content;

} catch (error) {
console.error(error)
}
sendToOpenAIButton.disabled = false;
sendToOpenAIButton.textContent = 'Send to OpenAI';
});
Expand Down