NEW Claude 3.5 Sonnet API: Build a Handwriting Analyzer Web App from Scratch

Key Takeaways

in this video we'll explore the fascinating world of handwriting analysis using Claude 3.5 sonnet's Advanced Vision capabilities we'll build a powerful web application with streamlit that lets you upload images of handwriting and receive insightful personality interpretations we'll walk through the entire process from setting up the API to designing an intuitive user interface by the end of this video you'll have the knowledge to create your own handwriting analysis tool we'll also discuss whether the claims that Sonet outperforms GPT 4 in quality speed and cost are accurate and put them head-to-head why is everyone talking about 3.5 Sonet you've probably noticed the buzz around Claude 35 son it lately and for good reason this latest iteration from anthropic represents a significant Leap Forward in AI capabilities CLA son is the most advanced Vision model available on the market its improvements shine in tasks requiring visual reasoning such as interpreting charts and graphs how does it compare to GPT 40 let's start the comparison by looking at the speed of both models side by side we ask each model to write a 500w blog article as you can see even though both models start almost simultaneously Claude seems to be much faster Claude son speed shines in real world use often outpacing GPT 4 in text generation and data analysis son onet generally scores higher than GPT 40 in most categories for graduate level reasoning Claude 3.5 son comes out on top showing stronger performance in undergraduate knowledge both models are neck and neck performing exceptionally well in zero shot tests when it comes to coding Claude has a slight Edge over GPT 40 but both are quite impressive in multilingual math Claude slightly outperforms GPT 40 however GPT 40 takes the lead in math problem solving for reason over text Claude scores a bit higher than GPT 4 in summary Claude 35 son generally has a slight Edge but GPT 40 remains very competitive what does Claude 35 cost Claude son is available for free on claw. but if you're a Claud Pro or team plan subscriber you get it with much higher rate limits you can also access it via the anthropic API where it costs three per million doll input tokens and $15 per million output tokens with a 200k token context window for comparison GPT costs $15 per million output tokens but has a smaller 128k token context window how user friendly is the API the anthropic API is very beginner friendly thanks to its comprehensive documentation and its similarity to the open AI API this means that if you're already familiar with the open AI API you'll find the transition to using the anthropic API seamless what are artifacts Claude has introduced a cool new feature called artifacts when you ask Claude to generate content like code Snippets text documents or website designs these artifacts appear in a dedicated window alongside your conversation this creates a dynamic workspace where you can see edit and build upon claude's Creations in real time seamlessly integrating AI generated content into your projects this marks a significant Evolution from Claude being just a conversational AI to becoming a collaborative work environment but enough Theory let's dive into our project where we use this great new model and its API to build a handwriting analyzer with a fully functional web interface if you haven't worked with python and visual studio code yet please check out the introduction video series on AI for devs. comom we explain in detail for absolute beginners how to work with python and apis as always we start by creating a virtual environment and activating it to keep dependencies cleanly separated from each other then we install anthropic with Pip we create a new file named app.py using the touch command here we first import anthropic then create a client that we use to interact with the anthropic API for this we call client. messages. create and pass them model as a parameter in this case clawed 35 and set the maximum number of tokens to 1,000 we can Define the messages we want to send to the model starting with the user role here we want to send a simple text message with the content hi the result of this call should be printed to the console for which we use the print command now we can already test the script by opening the terminal to authenticate with the cloud API we need to set the anthropic API key for this we go to the anthropic website and create an API key in the internal area in the API key section we simply click on create key we give the key a name copy it and then paste it into the terminal now we can start the script with python app.py unfortunately we get an error message because I misspelled the model name we quickly fix this by removing the dashes let's try it again and it looks great we get a message back from the model next we want to actually analyze an image so we first take this nice picture here of an ant and convert it to base 64 this line of code fetches an image from a given URL using the httpx library encodes the image content to base 64 and then decodes it into a utf8 string this string can then be sent to the anthropic API for further processing or analysis we specify the type as image and pass the following parameters type as base 64 media type as image. JPEG and data as the base 64 encoded string now we change the prompt to describe the image and can already run the script we see that the image is correctly analyzed and it's impressive how detailed the description is however our actual goal is not to analyze animal pictures but to analyze handwriting for this we first change the user prompt and specify exactly what to look for such as pressure size spacings length Etc as an example we want to use the handwriting of matis and specify the image above now we try it out wonderful and we get a detailed analysis indicating that it's a cursive style and suggesting that this might point to an outgoing personality furthermore it possibly indicates an artistic flare which is not wrong for matis as a second example we want to examine the handwriting of Steven Hawking as a contrast here we get the analysis that it is a more deliberate writer style it is very neat and precise suggesting an attention to detail now we want to build a user interface for this we first install streamlit we import streamlit and start with a simple title we can easily use the title function of streamlit we give it the title handwriting analyzer and to make it a bit more personal we use a nice Emoji this single line is enough to start the interface with streamlit run app.py and we see we have a web page with a title next we want to add the upload feature here we use a file uploader and when a file is selected we want to display the uploaded image directly on the web page for this we need to import image from the P Library we have a button that starts the analysis and calls our logic as a method therefore we need to wrap our logic into a method called analyze handwriting to which we pass an image we create the new function with the keyword defa and name it analyze handwriting we then indent all the logic with the call to Claude so that it's only executed when we run the method we create an in-memory bite buffer using byes IO we import byes IO from IO and save the image into this buffer in p PNG format then the Buffer's content is encoded into a base 64 string which is ready to be used or sent to another service in summary we convert the given uploaded image into a base 64 string we need to adapt the return result of the method to return the analysis for this we access message content the first element of which is the text now we have everything we need and we can go back to the page and try out our analysis let's upload a handwritten note from Freud the image is displayed correctly and we start the analysis and see the detailed analysis of the image wonderful everything worked and this could be turned into a service where people might be willing to pay a few euros