Skip to content
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

migrate openai-asst-webpage-js to vite/esm #271

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

migrate openai-asst-webpage-js to vite/esm #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
040d33a
migrate openai-asst-webpage-js to vite/esm
manekinekko Apr 16, 2024
00435cd
update template content from upstream/main
manekinekko Apr 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
0 ...x/templates/openai-asst-webpage-js/ai.png → ...plates/openai-asst-webpage-js/favicon.png
View file
Open in desktop
File renamed without changes
11 changes: 6 additions & 5 deletions src/ai/.x/templates/openai-asst-webpage-js/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Expand All @@ -16,8 +17,8 @@
</div>

<div id="leftSide" class="w3-cell w3-center w3-hide-small w3-hide-medium">
<button id="newChatButton" class="w3-button w3-center" onclick="newChat()">
<div class="w3-left w3-medium"><img id="logoIcon" src="./ai.png" alt="Logo"> New chat</div>
<button id="newChatButton" class="w3-button w3-center">
<div class="w3-left w3-medium"><img id="logoIcon" src="./favicon.png" alt="Logo"> New chat</div>
<div class="w3-right"><i class="fa fa-edit"></i></div>
</button>

Expand All @@ -41,7 +42,7 @@ <h3>chat.contoso.com</h3>
<!-- Main Chat Area -->
<div id="main" class="w3-center">
<div class="w3-col">
<img id="logo" src="./ai.png" alt="Logo">
<img id="logo" src="./favicon.png" alt="Logo">

<!-- Chat Panel -->
<div id="chatPanel" class="w3-center w3-padding">
Expand All @@ -53,7 +54,7 @@ <h3>chat.contoso.com</h3>
<!-- User Input Panel -->
<div id="userInputPanel" class="w3-center w3-bottom w3-padding w3-margin-bottom">
<textarea id="userInput" class="w3-border w3-input w3-cell w3-left" placeholder="Type your message..." rows="1"></textarea>
<button id="sendButton" class="w3-button w3-cell" onclick="sendMessage()">
<button id="sendButton" class="w3-button w3-cell">
<i class="fa fa-solid fa-arrow-up"></i>
</button>
</div>
Expand All @@ -64,7 +65,7 @@ <h3>chat.contoso.com</h3>
</div>

<!-- JavaScript for dynamic updates -->
<script src="dist/main.js"></script>
<script type="module" src="/src/script.js"></script>

</body>
</html>
10 changes: 5 additions & 5 deletions src/ai/.x/templates/openai-asst-webpage-js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack"
"start": "vite",
"build": "vite build",
"preview": "vite preview"
},
"author": "",
"license": "MIT",
Expand All @@ -17,8 +19,6 @@
},
"keywords": [],
"devDependencies": {
"dotenv-webpack": "^7.0.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
"vite": "^5.2.8"
}
}
}
10 changes: 4 additions & 6 deletions src/ai/.x/templates/openai-asst-webpage-js/src/CreateOpenAI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const { InteractiveBrowserCredential } = require('@azure/identity');
const { OpenAIEnvInfo } = require('./OpenAIEnvInfo');
const { OpenAI } = require('openai');
import { InteractiveBrowserCredential } from '@azure/identity';
import { OpenAIEnvInfo } from './OpenAIEnvInfo';
import { OpenAI } from 'openai';

class CreateOpenAI {
export class CreateOpenAI {

static async forAssistantsAPI({ dangerouslyAllowBrowser, errorCallback } = {}) {
return this.forAPI({ api: 'assistants', dangerouslyAllowBrowser, errorCallback });
Expand Down Expand Up @@ -120,5 +120,3 @@ class CreateOpenAI {
return token.token;
}
}

exports.CreateOpenAI = CreateOpenAI;
9 changes: 3 additions & 6 deletions src/ai/.x/templates/openai-asst-webpage-js/src/OpenAIAssistantsStreamingClass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<#@ template hostspecific="true" #>
<#@ output extension=".js" encoding="utf-8" #>
<#@ parameter type="System.String" name="ClassName" #>
const { OpenAI } = require('openai');

class <#= ClassName #> {
export class <#= ClassName #> {

// Constructor
constructor(openAIAssistantId, openai, simulateTypingDelay = 0) {
Expand All @@ -22,7 +20,7 @@ class <#= ClassName #> {

// Retrieve an existing thread
async retrieveThread(threadId) {
this.thread =await this.openai.beta.threads.retrieve(threadId);
this.thread = await this.openai.beta.threads.retrieve(threadId);
console.log(`Thread ID: ${this.thread.id}`);
return this.thread;
}
Expand Down Expand Up @@ -87,5 +85,4 @@ class <#= ClassName #> {
}
}
}

exports.<#= ClassName #> = <#= ClassName #>;

29 changes: 13 additions & 16 deletions src/ai/.x/templates/openai-asst-webpage-js/src/OpenAIEnvInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,25 @@
<#@ parameter type="System.String" name="AZURE_OPENAI_SYSTEM_PROMPT" #>
<#@ parameter type="System.String" name="OPENAI_API_KEY" #>
<#@ parameter type="System.String" name="OPENAI_MODEL_NAME" #>
class OpenAIEnvInfo {

export class OpenAIEnvInfo {
// NOTE: Never deploy your key in client-side environments like browsers or mobile apps
// SEE: https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety

static ASSISTANT_ID = process.env.ASSISTANT_ID ?? "<#= ASSISTANT_ID #>";
static ASSISTANT_ID = import.meta.env.ASSISTANT_ID ?? "<insert your OpenAI assistant ID here>";

static AZURE_CLIENT_ID = process.env.AZURE_CLIENT_ID ?? null;
static AZURE_TENANT_ID = process.env.AZURE_TENANT_ID ?? null;
static AZURE_CLIENT_ID = import.meta.env.AZURE_CLIENT_ID ?? null;
static AZURE_TENANT_ID = import.meta.env.AZURE_TENANT_ID ?? null;

static AZURE_OPENAI_API_KEY = process.env.AZURE_OPENAI_API_KEY ?? "<#= AZURE_OPENAI_API_KEY #>";
static AZURE_OPENAI_API_VERSION = process.env.AZURE_OPENAI_API_VERSION ?? "<#= AZURE_OPENAI_API_VERSION #>";
static AZURE_OPENAI_ENDPOINT = process.env.AZURE_OPENAI_ENDPOINT ?? "<#= AZURE_OPENAI_ENDPOINT #>";
static AZURE_OPENAI_CHAT_DEPLOYMENT = process.env.AZURE_OPENAI_CHAT_DEPLOYMENT ?? "<#= AZURE_OPENAI_CHAT_DEPLOYMENT #>";
static AZURE_OPENAI_API_KEY = import.meta.env.AZURE_OPENAI_API_KEY ?? "<insert your Azure OpenAI API key here>";
static AZURE_OPENAI_API_VERSION = import.meta.env.AZURE_OPENAI_API_VERSION ?? "<insert your Azure OpenAI API version here>";
static AZURE_OPENAI_ENDPOINT = import.meta.env.AZURE_OPENAI_ENDPOINT ?? "<insert your Azure OpenAI endpoint here>";
static AZURE_OPENAI_CHAT_DEPLOYMENT = import.meta.env.AZURE_OPENAI_CHAT_DEPLOYMENT ?? "<insert your Azure OpenAI chat deployment name here>";

static AZURE_OPENAI_SYSTEM_PROMPT = process.env.AZURE_OPENAI_SYSTEM_PROMPT ?? "<#= AZURE_OPENAI_SYSTEM_PROMPT #>";
static AZURE_OPENAI_SYSTEM_PROMPT = import.meta.env.AZURE_OPENAI_SYSTEM_PROMPT ?? "You are a helpful AI assistant.";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all the other variables fail if not set, just double checking that this is what we want as a default here. Not sure what a "failure" system prompt would be unless we set it to something like "no matter what I say respond with 'you have not set your system prompt'"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of propagating the error message to the user's UI so they can get instant feedback (vs having to switch back to terminal console or open browser console).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I just noticed that this is currently the case. Missing env vars are error message is shown to users in the UI. So ignore my previous comment :)


static OPENAI_API_KEY = process.env.OPENAI_API_KEY ?? "<#= OPENAI_API_KEY #>";
static OPENAI_ORG_ID = process.env.OPENAI_ORG_ID ?? null;
static OPENAI_MODEL_NAME = process.env.OPENAI_MODEL_NAME ?? "<#= OPENAI_MODEL_NAME #>";
static OPENAI_API_KEY = import.meta.env.OPENAI_API_KEY ?? "<insert your OpenAI API key here>";
static OPENAI_ORG_ID = import.meta.env.OPENAI_ORG_ID ?? null;
static OPENAI_MODEL_NAME = import.meta.env.OPENAI_MODEL_NAME ?? "<insert your OpenAI model name here>";

static isConnectionInfoOk(errorCallback) {
const ok = this.isAzureAADConnectionInfoOk() || this.isAzureKeyConnectionInfoOk() || this.isOpenAIConnectionInfoOk();
Expand Down Expand Up @@ -70,6 +69,4 @@ class OpenAIEnvInfo {
}
return true;
}
}

exports.OpenAIEnvInfo = OpenAIEnvInfo;
}
18 changes: 8 additions & 10 deletions src/ai/.x/templates/openai-asst-webpage-js/src/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<#@ template hostspecific="true" #>
<#@ output extension=".js" encoding="utf-8" #>
<#@ parameter type="System.String" name="ClassName" #>
const marked = require("marked");
const hljs = require("highlight.js");
import * as marked from "marked";
import * as hljs from "highlight.js";

const { CreateOpenAI } = require("./CreateOpenAI");
const { OpenAIEnvInfo } = require("./OpenAIEnvInfo");
const { <#= ClassName #> } = require("./OpenAIAssistantsStreamingClass");
import { CreateOpenAI } from "./CreateOpenAI";
import { OpenAIEnvInfo } from "./OpenAIEnvInfo";
import { <#= ClassName #> } from "./OpenAIAssistantsStreamingClass";

let assistant;
async function assistantInit(threadId = null) {
Expand Down Expand Up @@ -484,10 +484,8 @@ async function init() {

userInputTextAreaFocus();

window.newChat = newChat;
window.loadThread = loadThread;
window.sendMessage = sendMessage;
window.toggleTheme = toggleTheme;
document.querySelector('#sendButton').addEventListener('click', sendMessage);
document.querySelector('#newChatButton').addEventListener('click', newChat);
}

init();
window.addEventListener('DOMContentLoaded', init);
3 changes: 3 additions & 0 deletions src/ai/.x/templates/openai-asst-webpage-js/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {
envPrefix: ["ASSISTANT_ID", "AZURE_", "OPENAI_"],
};
27 changes: 0 additions & 27 deletions src/ai/.x/templates/openai-asst-webpage-js/webpack.config.js
View file
Open in desktop

This file was deleted.