Skip to content

Latest commit

 

History

History
executable file
·
109 lines (91 loc) · 4.32 KB

README.md

File metadata and controls

executable file
·
109 lines (91 loc) · 4.32 KB
Raw

azure-openai-gpt4-chat

Build & Deploy

ChatGPT-like streaming chat bot powered by Azure OpenAI and GPT-4

NOTE: project and documentation in progress

About

This is a simple chat app that streams messages to and from an Azure OpenAI Services instance using a GPT-4 model deployment

Prerequisites

  • Node.js >= 20.x (with npm >= v10.x)
  • Azure Subscription
    • Azure OpenAI access enabled
    • Azure OpenAI Services deployed along with a GPT-4 model
      • API key for deployed service

Running Locally

  1. Clone repo git clone https://github.com/cu-cit-cloud-team/azure-openai-gpt4-chat.git
  2. Enter directory cd azure-openai-gpt4-chat
  3. Copy .env.local.example to .env.local and fill in values
  4. If using locally installed Node.js:
    1. Install dependencies npm install
    2. Run project locally npm run dev
  5. If using devcontainer:
    1. Open in devcontainer (dependencies automatically installed)
    2. Run project npm run dev
  6. Visit http://localhost:3001 in your browser
  7. ctrl+c to stop

Features

  • Chat with an Azure OpenAI GPT-4 model
  • Chat responses stream in real-time for a ChatGPT-like experience
  • Uses textarea for input for multi-line support
    • Focus textarea on page load
    • textarea auto-resizes as you type
    • enter key to submit message
    • shift+enter for new line
  • Loading indicator next to chat response until it's finished
  • Formats code blocks and other markdown inside of chat messages nicely
  • Current chat history is stored in browser's local storage
  • View/edit system message for chat session (e.g. "You are a helpful AI assistant")
  • View/edit chat session parameters (e.g. temperature, top p, etc)
  • Live token count (used/remaining) displayed for message and system message
  • Change Azure OpenAI model (GPT-4, GPT-3.5, etc)
  • Download current chat history as JSON
  • Clear current chat history
    • Keyboard shortcut (cmd+esc) when textarea has focus
  • Copy full messages and responses to clipboard
    • Copy individual code snippets (within responses) to clipboard
  • Delete individual messages and responses from chat history
  • Stop response that's currently streaming in (useful for long responses that aren't necessary)
  • Regenerate last response
  • Hosted via Azure App Service
    • Built/deployed with GitHub Actions
    • Azure App Service App locked down via AD to just our team
    • Tries to identify user from login session and personalize chat session
  • Uses relative time for chat message timestamps
    • Relative time has tooltip with full timestamp
    • Tooltip shows time for same day and full date/time if older than "today"
  • Theme changer with several light and dark themes
    • Defaults to light or dark based on system preference
  • Responsive layout
  • devcontainer for local development

Roadmap

Planned

  • no new features currently under development

Potential

  • Import chat session from JSON
  • Multiple chat sessions
    • Sidebar with scrollable and filterable list of chat sessions
    • Stateful via local storage
    • Delete individual chat sessions
    • Export individual chat sessions to JSON
    • Import chat sessions from JSON

Uses