haiku (#157)

README.md

@@ -3,7 +3,7 @@
 ![](https://github.com/aws-samples/bedrock-claude-chat/actions/workflows/test.yml/badge.svg)
 
 > [!Tip]
-> 🔔**Multi-modal chat by [Claude v3 (Sonnet)](https://aws.amazon.com/jp/about-aws/whats-new/2024/03/anthropics-claude-3-sonnet-model-amazon-bedrock/) is available for now**. See [Release](https://github.com/aws-samples/bedrock-claude-chat/releases/tag/v0.4.2) for the detail.
+> 🔔**Multi-modal chat by [Claude v3 (Haiku, Sonnet)](https://aws.amazon.com/jp/about-aws/whats-new/2024/03/anthropics-claude-3-sonnet-model-amazon-bedrock/) is available for now**. See [Release](https://github.com/aws-samples/bedrock-claude-chat/releases/tag/v0.4.2) for the detail.
 
 > [!Warning]
 > The current version (`v0.4.x`) has no compatibility with ex version (~`v0.3.0`) due to the change of DynamoDB table schema. **Please note that UPDATE (i.e. `cdk deploy`) FROM EX VERSION TO `v0.4.x` WILL DESTROY ALL OF EXISTING CONVERSATIONS.**
@@ -12,7 +12,7 @@ This repository is a sample chatbot using the Anthropic company's LLM [Claude](h
 
 ### Basic Conversation
 
-Not only text but also images are available with [Anthropic's Claude 3 Sonnet](https://www.anthropic.com/news/claude-3-family).
+Not only text but also images are available with [Anthropic's Claude 3](https://www.anthropic.com/news/claude-3-family). Currently we support `Haiku` and `Sonnet`.
 
 ![](./docs/imgs/demo.gif)
 
@@ -35,7 +35,7 @@ Add your own instruction and give external knowledge as URL or files (a.k.a [RAG
 
 ## 🚀 Super-easy Deployment
 
-- On us-east-1 region, open [Bedrock Model access](https://us-east-1.console.aws.amazon.com/bedrock/home?region=us-east-1#/modelaccess) > `Manage model access` > Check `Anthropic / Claude`, `Anthropic / Claude Instant`, `Anthropic / Claude 3 Sonnet` and `Cohere / Embed Multilingual` then `Save changes`.
+- On us-east-1 region, open [Bedrock Model access](https://us-east-1.console.aws.amazon.com/bedrock/home?region=us-east-1#/modelaccess) > `Manage model access` > Check `Anthropic / Claude 3 Haiku`, `Anthropic / Claude 3 Sonnet` and `Cohere / Embed Multilingual` then `Save changes`.
 
 <details>
 <summary>Screenshot</summary>

backend/app/bedrock.py

@@ -61,6 +61,8 @@ def get_model_id(model: str) -> str:
         return "anthropic.claude-instant-v1"
     elif model == "claude-v3-sonnet":
         return "anthropic.claude-3-sonnet-20240229-v1:0"
+    elif model == "claude-v3-haiku":
+        return "anthropic.claude-3-haiku-20240307-v1:0"
     else:
         raise NotImplementedError()
 

backend/app/repositories/model.py

@@ -19,7 +19,9 @@ class KnowledgeModel(BaseModel):
 class MessageModel(BaseModel):
     role: str
     content: list[ContentModel]
-    model: Literal["claude-instant-v1", "claude-v2", "claude-v3-sonnet"]
+    model: Literal[
+        "claude-instant-v1", "claude-v2", "claude-v3-sonnet", "claude-v3-haiku"
+    ]
     children: list[str]
     parent: str | None
     create_time: float

backend/app/route_schema.py

@@ -43,15 +43,23 @@ class KnowledgeDiffInput(BaseSchema):
 class MessageInput(BaseSchema):
     role: str
     content: list[Content]
-    model: Literal["claude-instant-v1", "claude-v2", "claude-v3-sonnet"]
+    model: Literal[
+        "claude-instant-v1", "claude-v2", "claude-v3-sonnet", "claude-v3-haiku"
+    ]
     parent_message_id: str | None
 
 
 class MessageOutput(BaseSchema):
     role: str
     content: list[Content]
     # NOTE: "claude" will be deprecated (same as "claude-v2")
-    model: Literal["claude-instant-v1", "claude-v2", "claude", "claude-v3-sonnet"]
+    model: Literal[
+        "claude-instant-v1",
+        "claude-v2",
+        "claude",
+        "claude-v3-sonnet",
+        "claude-v3-haiku",
+    ]
     children: list[str]
     parent: str | None
 

backend/app/usecases/chat.py

@@ -297,8 +297,8 @@ def propose_conversation_title(
     user_id: str,
     conversation_id: str,
     model: Literal[
-        "claude-instant-v1", "claude-v2", "claude-v3-sonnet"
-    ] = "claude-instant-v1",
+        "claude-instant-v1", "claude-v2", "claude-v3-sonnet", "claude-v3-haiku"
+    ] = "claude-v3-haiku",
 ) -> str:
     PROMPT = """Reading the conversation above, what is the appropriate title for the conversation? When answering the title, please follow the rules below:
 <rules>
@@ -311,11 +311,6 @@ def propose_conversation_title(
     # Fetch existing conversation
     conversation = find_conversation_by_id(user_id, conversation_id)
 
-    # Omit image (claude instant v1 / v2 don't support image content type)
-    # TODO: Remove this when claude v3 haiku is supported
-    for message in conversation.message_map.values():
-        message.content = [c for c in message.content if c.content_type != "image"]
-
     messages = trace_to_root(
         node_id=conversation.last_message_id,
         message_map=conversation.message_map,

docs/README_ja.md

@@ -3,7 +3,7 @@
 ![](https://github.com/aws-samples/bedrock-claude-chat/actions/workflows/test.yml/badge.svg)
 
 > [!Tip]
-> 🔔**[Claude v3 (Sonnet)](https://aws.amazon.com/jp/about-aws/whats-new/2024/03/anthropics-claude-3-sonnet-model-amazon-bedrock/) による画像とテキスト両方を使ったチャットが可能になりました。** 詳細は[Release](https://github.com/aws-samples/bedrock-claude-chat/releases/tag/v0.4.2)をご確認ください。
+> 🔔**[Claude v3 (Haiku, Sonnet)](https://aws.amazon.com/jp/about-aws/whats-new/2024/03/anthropics-claude-3-sonnet-model-amazon-bedrock/) による画像とテキスト両方を使ったチャットが可能になりました。** 詳細は[Release](https://github.com/aws-samples/bedrock-claude-chat/releases/tag/v0.4.2)をご確認ください。
 
 > [!Warning]
 > 現在のバージョン(v0.4.x)は、DynamoDB テーブルスキーマの変更のため、過去バージョン(~v0.3.0)とは互換性がありません。**以前のバージョンから v0.4.x へアップデートすると、既存の対話記録は全て破棄されますので注意が必要です。**
@@ -12,7 +12,7 @@
 
 ### 基本的な会話
 
-[Claude 3 Sonnet](https://www.anthropic.com/news/claude-3-family)によるテキストと画像の両方を利用したチャットが可能です。
+[Claude 3](https://www.anthropic.com/news/claude-3-family)によるテキストと画像の両方を利用したチャットが可能です。現在`Haiku`および`Sonnet`をサポートしています。
 ![](./imgs/demo_ja.gif)
 
 > [!Note]
@@ -27,7 +27,7 @@
 
 ## 🚀 まずはお試し
 
-- us-east-1 リージョンにて、[Bedrock Model access](https://us-east-1.console.aws.amazon.com/bedrock/home?region=us-east-1#/modelaccess) > `Manage model access` > `Anthropic / Claude`, `Anthropic / Claude Instant`, `Anthropic / Claude 3 Sonnet`, `Cohere / Embed Multilingual`をチェックし、`Save changes`をクリックします
+- us-east-1 リージョンにて、[Bedrock Model access](https://us-east-1.console.aws.amazon.com/bedrock/home?region=us-east-1#/modelaccess) > `Manage model access` > `Anthropic / Claude 3 Haiku`, `Anthropic / Claude 3 Sonnet`, `Cohere / Embed Multilingual`をチェックし、`Save changes`をクリックします
 <details>
 <summary>スクリーンショット</summary>
 

frontend/src/@types/conversation.d.ts

@@ -1,5 +1,9 @@
 export type Role = 'system' | 'assistant' | 'user';
-export type Model = 'claude-instant-v1' | 'claude-v2' | 'claude-v3-sonnet';
+export type Model =
+  | 'claude-instant-v1'
+  | 'claude-v2'
+  | 'claude-v3-sonnet'
+  | 'claude-v3-haiku';
 export type Content = {
   contentType: 'text' | 'image';
   mediaType?: string;

frontend/src/hooks/useModel.ts

@@ -8,18 +8,13 @@ const availableModels: {
   supportMediaType: string[];
 }[] = [
   {
-    modelId: 'claude-instant-v1',
-    label: 'Claude Instant',
-    supportMediaType: [],
-  },
-  {
-    modelId: 'claude-v2',
-    label: 'Claude v2',
-    supportMediaType: [],
+    modelId: 'claude-v3-haiku',
+    label: 'Claude 3 (Haiku)',
+    supportMediaType: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
   },
   {
     modelId: 'claude-v3-sonnet',
-    label: 'Claude v3',
+    label: 'Claude 3 (Sonnet)',
     supportMediaType: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
   },
 ];
@@ -28,7 +23,7 @@ const useModelState = create<{
   modelId: Model;
   setModelId: (m: Model) => void;
 }>((set) => ({
-  modelId: 'claude-instant-v1',
+  modelId: 'claude-v3-haiku',
   setModelId: (m) => {
     set({
       modelId: m,