Skip to content

Commit

Permalink
Merge pull request #43 from fingerthief/dev/add-claude-model-support
Browse files Browse the repository at this point in the history 
Added support for Claude Vision image processing.

If a user has a GPT model selected GPT Vision is used automatically with the vision:: prefix.

If a user has a Claude model selected it will use Claude Vision automatically with the vision:: prefix.
Added a new claude-api-access file to help clean some of this terrible code up.

tweak to the styling of links show in chat bubbles to be readable.

Various small bugfixes for Claude model implementation.
  • Loading branch information
@fingerthief
fingerthief authored Mar 8, 2024
2 parents 04d5916 + cf14fb6 commit 932001f
Show file tree
Hide file tree
Showing 8 changed files with 621 additions and 90 deletions.
16 changes: 9 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@ On Android the process is basically the same except the name of the option is **
## Features

- Minimal chat layout
- **GPT 3.5** Support
- **GPT 4** Support
- **GPT-4-Turbo** Support
- **GPT-Vision** activated by starting a message with **vision::** and then your prompt
- Google **PaLM 2** Support
- Models Suported
- **GPT 3.5**
- **GPT 4**
- **GPT-4-Turbo**
- **GPT-Vision** activated by having the **GPT-4 or GPT-Turbo** model selected and starting a message with **vision::** and then your prompt
- **PaLM 2**
- **Claude 3 Opus**
- **Claude Vision** activated by having the **Claude** model selected and starting a message with **vision::** and then your prompt
- Switch models mid conversations and maintain context
- Swipe Gestures for quick settings and conversations access
- Markdown Support
Expand Down Expand Up @@ -91,5 +94,4 @@ To run the web app locally, you'll need `NodeJS` installed so NPM is available.

### Building/Bundling (WIP)

- A basic Gulpfile exists that copies the necessary files for running the application into a folder named `public`. However, there is no minification yet.
- Running `npm run build` will perform the actions described in the point above.
- Running `npm run build` will perform a dist build gulpfile process that incldues minification and cache busting (sort of) and output to the `public` folder.
63 changes: 52 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<div class="settings-header">
<h2 data-bind="click: () => { window.location.reload(true); }">
<span class="fa-solid fa-arrows-rotate"></span>
Settings | V3.4.1</h2>
Settings | V4.1.0</h2>
</div>
<div class="sidebar-content-container">
<div class="api-key">
Expand All @@ -51,6 +51,15 @@ <h2 data-bind="click: () => { window.location.reload(true); }">
<input type="range" min="0" max="200" data-bind="value: sliderValue">
<span>Creative</span>
</div>
<div class="api-key">
<label for="api-key">Claude Key:</label>
<input autocomplete="off" id="claude-api-key" placeholder="Enter your API Key...">
</div>
<div class="slider-container">
<span>Serious</span>
<input type="range" min="0" max="200" data-bind="value: claudeSliderValue">
<span>Creative</span>
</div>
<div class="control">
<label for="model-selector">DALL-E Image Count:</label>
<select id="model-selector" data-bind="value: selectedDallEImageCount">
Expand Down Expand Up @@ -93,11 +102,11 @@ <h2 data-bind="click: () => { window.location.reload(true); }">
<div class="control">
<label for="model-selector">Model:</label>
<select id="model-selector" data-bind="value: selectedModel">
<option value="gpt-3.5-turbo">GPT-3.5-turbo</option>
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
<option value="gpt-4">GPT-4</option>
<option value="gpt-4-turbo-preview">GPT-4 Turbo</option>
<!-- <option value="gpt-4-vision-preview">GPT-4 Vision</option> -->
<option value="chat-bison-001">PaLM</option>
<option value="claude-3-opus-20240229">Claude 3 Opus</option>
</select>
</div>
</div>
Expand Down Expand Up @@ -130,11 +139,16 @@ <h2>Conversations</h2>
<div class="container">
<div class="chat">
<div class="header box">
<a href="https://github.com/TannerMiddleton/minimal-gpt#try-minimalgpt" target="_blank"
class="no-style-link"
data-bind="text: selectedModel().indexOf('bison') !== -1 ? 'MinimalPaLM' : 'MinimalGPT'">
<a href="https://github.com/fingerthief/minimal-gpt#try-minimalgpt" target="_blank" class="no-style-link" data-bind="visible: selectedModel().indexOf('bison') !== -1">
MinimalPaLM
</a>
<a href="https://github.com/fingerthief/minimal-gpt#try-minimalgpt" target="_blank" class="no-style-link" data-bind="visible: selectedModel().indexOf('claude') !== -1">
MinimalClaude
</a>
<a href="https://github.com/fingerthief/minimal-gpt#try-minimalgpt" target="_blank" class="no-style-link" data-bind="visible: selectedModel().indexOf('gpt') !== -1">
MinimalGPT
</a>
<a href="https://github.com/TannerMiddleton/minimal-gpt#try-minimalgpt" target="_blank"
<a href="https://github.com/fingerthief/minimal-gpt#try-minimalgpt" target="_blank"
class="no-style-link">
<span class="fa-brands fa-github"></span>
</a>
Expand Down Expand Up @@ -177,7 +191,7 @@ <h2>Conversations</h2>
</div>
</div>

<div data-bind="ifnot: selectedModel().indexOf('bison') !== -1">
<div data-bind="if: selectedModel().indexOf('gpt') !== -1">
<div data-bind="foreach: messages()">
<div data-bind="if: $parent.userSearchInput().trim().length === 0">
<div data-bind="css: role === 'user' ? 'user message' : 'gpt message', attr: { 'data-role': role }">
Expand Down Expand Up @@ -207,13 +221,28 @@ <h2>Conversations</h2>
</div>
</div>

<div data-bind="if: isLoading() && !isPalmEnabled()">
<div data-bind="if: selectedModel().indexOf('claude') !== -1">
<div data-bind="foreach: messages()">
<div data-bind="if: $parent.userSearchInput().trim().length === 0">
<div data-bind="css: role === 'user' ? 'user message' : 'gpt message', attr: { 'data-role': role }">
<div class="label">
<span class="fa-solid fa-robot fa-lg icon" data-bind="visible: role !== 'user'"></span>
<span class="fa-solid fa-circle-user fa-lg icon" data-bind="visible: role === 'user'"></span>
<span data-bind="text: role === 'user' ? 'User' : 'Claude'"></span>
</div>
<span id="message-contents" data-bind="html: $parent.formatMessage(content, false)"></span>
</div>
</div>
</div>
</div>

<div data-bind="if: isLoading() && !isPalmEnabled() && !isClaudeEnabled()">
<div class="gpt message padded" >
<div class="label">
<span class="fa-solid fa-robot fa-lg icon"></span>
<span>GPT</span>
</div>
<span data-bind="html: formatMessage(streamedMessageText() || ''), false"></span>
<span data-bind="html: formatMessage(streamedMessageText() || ''), false"></span>
</div>
</div>

Expand All @@ -228,6 +257,18 @@ <h2>Conversations</h2>
</div>
</div>

<div data-bind="if: isLoading() && isClaudeEnabled()">
<div class="gpt message padded">
<div class="label">
<span class="fa-solid fa-robot fa-lg icon"></span>
<span>Claude</span>
</div>
<span data-bind="text: 'Generating response '"></span>
<span class="loading spinner"></span>
</div>
</div>


<div data-bind="if: isGeneratingImage">
<div class="gpt message padded">
<div class="label">
Expand All @@ -243,7 +284,7 @@ <h2>Conversations</h2>
<div class="gpt message padded">
<div class="label">
<span class="fa-solid fa-robot fa-lg icon"></span>
<span>GPT Vision</span>
<span>Vision</span>
</div>
<span data-bind="text: 'Analyzing Image, this might take a minute.'"></span>
<span class="loading spinner"></span>
Expand Down
15 changes: 13 additions & 2 deletions index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,17 @@ body {
align-items: center;
}

a {
color: rgb(173, 167, 167);

&:hover,
&:focus,
&:active,
&:visited {
color: rgb(187, 187, 187);
}
}

.chat {
// border: 1px solid #444;
width: 99dvw;
Expand Down Expand Up @@ -813,9 +824,9 @@ $shadow-spread-radius: 0px;

.spinner {
display: inline-block;
width: 9px;
width: 10px;
color: lightskyblue;
height: 9px;
height: 10px;
margin-left: 5px;
border: 4px solid #3c8280;
border-left-color: #1cdfd8;
Expand Down
Loading

0 comments on commit 932001f

Please sign in to comment.