DEV Community: Barri

5 Open Source Large Language Models APIs for Developers

Barri — Wed, 01 May 2024 20:41:56 +0000

Introduction

Large language models (LLMs) have revolutionized the field of natural language processing (NLP) in recent years, enabling a wide range of new applications, such as writing services, translation, editing, and conversations with chatboxes. With the increasing popularity of LLMs, there is a growing demand for open-source APIs that allow developers to easily integrate these models into their projects.

From text generation and language translation to code synthesis and sentiment analysis, these APIs serve as essential tools for developers and businesses seeking to integrate cutting-edge language models seamlessly into their applications.

This comprehensive article aims to provide insights into the distinctive features, how they can be installed, and the usability of each open-source API. It delves into five of the most popular and widely utilized APIs for large language models, exploring the diverse functionalities they offer and their applications in the realm of NLP and offering a valuable resource for those navigating the ever-expanding landscape of language processing technologies.

Open Source Large Language Models APIs for Developers

Here are 5 open-source APIs for large language models

1. BERT API

BERT, which stands for Bidirectional Encoder Representations from Transformers, is a Natural Language Processing (NLP) model developed by Google. It can be used for translation, text generation, and text summarization.

To make it more accessible to developers, Google released pre-trained models along with the TensorFlow library. These pre-trained models come in different sizes, and developers can choose the one that best fits their specific requirements and computational resources.

Also, developers can obtain the pre-trained BERT model from various sources, including the official BERT GitHub repository or model hubs like Hugging Face’s Transformers library. A library that provides interfaces for both TensorFlow and PyTorch.

How to install and use BERT API in Python

Using the BERT API involves several steps, from installing the necessary libraries to loading the pre-trained BERT model and generating text or performing other NLP tasks. Here’s a general overview of the process:

Install the Transformers library using pip:

pip install transformers

This will install the BERT API along with other NLP models and tools.

Import the necessary classes from the Transformers library:

from transformers import AutoTokenizer, AutoModelForSequenceClassification

These classes provide tokenization and classification capabilities for BERT models.

Load the pre-trained BERT model you want to use:

model_name = “bert-base-uncased”

Load the model from the Hugging Face model hub:

tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForSequenceClassification.from_pretrained(model_name)

This will load the pre-trained BERT model and tokenizer for the specified model name.

Prepare Input Text and encode the input text into tokens using the tokenizer:

`input_text = “This is text to be processed”
encoded_text = tokenizer(input_text, truncation=True, padding=True, return_tensors=”pt”)`

This will convert the input text into numerical representations the BERT model can understand.

Perform a BERT Task. For example, text classification.

predictions = model(encoded_text)
predicted_label = predictions[0][0]

print(predicted_label)

This will classify the input text into a specified set of labels.

Some key features of BERT include:

BERT is pre-trained on a massive amount of text data, allowing it to learn general language representations. The pre-training involves predicting missing words in sentences (masked language model) and determining whether two sentences follow each other in the original text (next sentence prediction).
BERT has achieved state-of-the-art results on a wide range of NLP benchmarks and competitions. Its ability to capture intricate contextual relationships in language has made it a go-to choice for many NLP tasks.
BERT has been extended to support multiple languages, enabling its application in a global context for tasks like language translation and cross-lingual information retrieval.
BERT is designed to be fine-tuned for specific downstream tasks, such as text classification, named entity recognition, question answering, and more. This transfer learning approach allows BERT to leverage its pre-trained knowledge for various NLP applications.

2. ChatGPT API

Unarguably one of the biggest and powerful large language models and the most popular LLM in the world. ChatGPT (Chat Generative Pre-Trained Transformer) API attracts users in millions. The ChatGPTAPI is an interface created by OpenAI that allows developers to integrate GPT3 and GPT4 models into private, personal applications or programming languages like Python to build intelligent, conversational interfaces.

ChatGPT is renowned for its abilities to generate human-like quality text, translate languages, write programming code, write different kinds of creative content, and answer questions in an informative way.

Integrating ChatGPT into a programming language involves establishing a connection between the ChatGPT API and a chosen programming language. This allows you to leverage ChatGPT’s text-generation capabilities within your programming environment.

The specific steps and required libraries will vary depending on the programming language you’re using, but the general process involves the following steps:

Create API Key. Generate a unique access code to enable communication and authentication with the API. You can generate an API key here.
Install OpenAI API: Begin by installing the OpenAI API using your programming language’s package manager.
pip install openai

Once the OpenAI API is installed, import the classes and use the bindings and your secret key to run the following

from openai import OpenAI
client = OpenAI(
 api_key="Your_API_Key",
)
chat_completion = client.chat.completions.create(
 model=”gpt-3.5-turbo”,
 messages=[{“role”: “user”, “content”: “Hello world”}]
)

Key features of ChatGPT include:

ChatGPT is known for its following key features:

Large and powerful Model: ChatGPT is one of the largest open-source LLMs available. This means that it is capable of performing a wide range of tasks and generating high-quality output.
Versatility: ChatGPT can be used for a variety of NLP tasks, including text generation, translation, question answering, and code generation. This makes it a valuable tool for a wide range of applications.

3. Pathways System: ChatGPT is trained using the Pathways system, a novel training paradigm that enhances the model’s efficiency and adaptability. This system allows ChatGPT to learn from multiple sources of data and adapt to new tasks more effectively

4. Chain-of-Thought Reasoning: ChatGPT employs a chain-of-thought reasoning approach, allowing it to break down complex problems into smaller, more manageable steps. This capability enhances its ability to answer open-ended questions, provide explanations for its reasoning, and generate more coherent and relevant text.

5. Dense Decoder-Only Transformer: ChatGPT utilizes a dense decoder-only transformer architecture, which improves its fluency and coherence in generated text. This architecture enables the model to better capture long-range dependencies in language and produce more natural-sounding text.

3. LLAMA

LLAMA (Large Language Model Meta AI) is a large language model developed by Meta AI. Described “an easy-to-use API for LLAMA mocan dels. It is available in multiple sizes (7B, 13B, 33B, and 65B parameters). It is free for commercial and research purposes and it aims to democratize access to large language models by requiring less computing power and resources for training and deployment.

LLAMA is capable of performing many kinds of tasks, including text generation, translation, question answering, and code generation. The new LLAMA 2 model is even more impressive. It was trained on 40% more data than LLAMA 1 and has double the context length.

Available as an open-source API, it can be used with a variety of programming languages. There is also a pre-trained LLAMA model available, so you can get started right away.

To use LLAMA, you will need to:

Install the LLAMA API: The LLAMA API can be installed using your programming language’s package manager. For python, that would be

pip install llama-cpp-python

Or you can download the model from the official website.
Or load a pre-trained LLAMA model from a file or a remote repository.

Now, import the classes and specify the model path

from llama_cpp import Llama
llm = Llama(model_path=”./models/7B/ggml-model.bin”)
output = llm(“Q: Name the planets in the solar system? A: “, max_tokens=32, stop=[“Q:”, “\n”], echo=True)
print(output)

Process your input text: The LLAMA API can accept text input in a variety of formats, including plain text, HTML, and JSON.
Generate output text: The LLAMA API can generate text in a variety of formats, including plain text, HTML, and JSON.

Key features of LLAMA:

1. Large and powerful: LLAMA is one of the largest open-source LLMs available. This means that it is capable of performing a wide range of tasks and generating high-quality output.

2. Versatile: LLAMA can be used for a variety of NLP tasks, including text generation, translation, question answering, code generation, creative writing, and code completion. This makes it a valuable tool for a wide range of applications.

3. Open-source: LLAMA is an open-source model, which means that it is freely available for anyone to use. This makes it a great choice for developers who want to experiment with LLMs.

4. PaLM API

PaLM (Pathways Language Model) is a groundbreaking LLM introduced by Google AI in early 2022. The PaLM API and MakerSuite make it fast and easy for developers to use Google’s large language models to build innovative AI applications.

With a staggering 540 billion parameters, PaLM stands as one of the largest and most powerful language models ever created. Its immense capacity enables PaLM to excel in a wide range of natural language processing (NLP) tasks and allows it to process complex prompts quickly.

Installing the PaLM API is a straightforward process that involves setting up your environment and accessing the API through a package manager. Here’s a step-by-step guide with Python:

Get an API key. You can generate one with Google or MakerSuite.

Install using pip
pip install google-generativeai

Import the libraries and configure your API key
import google.generativeai as palm

palm.configure(api_key=API_KEY)

Using any of the models, you can prompt it to write a short story for your blog

model_name=”models/text-bison-001"
prompt=’’Write a short story of a girl and a little dinosaur. 
Summarize it to four paragraphs of 100 words each. ‘’’

completion=palm.generate_text(
 model=model_name,
 prompt=prompt,
 temperature=0.99,
 max_output_tokens=800,
)
print(completion.result)

You can also install PaLM on Google Cloud Platform (GCP) and use FireBase extensions to summarize text or perform other NLP tasks.

Key features of PaLM

1. Multilingual Translation: PaLM can accurately translate text between a wide range of languages, preserving the nuances and context of the original text. It can also adapt its translation style to different languages, considering cultural and linguistic differences.

2. Domain-Specific Translation: PaLM can be fine-tuned for specific domains, such as legal or medical translation, to improve accuracy and relevance.

3. Reasoning and Inference: PaLM can employ chain-of-thought reasoning and inference to understand the context and implications of questions, leading to more accurate and relevant answers.
Knowledge Base Access: PaLM can access and integrate information from external knowledge sources, such as Google Search, to provide more comprehensive and contextual answers.

**4. Code Optimization: **PaLM can generate code that adheres to established coding style conventions and best practices, making it easier to integrate into existing codebases.It can also optimize generated code for performance and efficiency, reducing computational overhead and resource utilization.

5. Fine-Tuning: PaLM can be fine-tuned for specific tasks or domains, tailoring its capabilities to address specialized requirements.

6. Research and Development: PaLM is an active area of research, with ongoing efforts to enhance its capabilities and expand its applications.

5. BLOOM API

The Bloom (BigScience Large Open-Science Open-Access Multilingual) Large Language Model API is a powerful tool for natural language processing (NLP) that utilizes a massive, 176-billion-parameter language model called BLOOM. It was developed by BigScience and built on transformers.

It’s the first major open-source project to authoritatively evaluate and rank human-level performance in a range of languages, with ground-breaking tools for evaluating them.

Installing the Bloom API (Bloom Large Language Model) involves setting up your environment and accessing the API through Hugging Face. Here’s a step-by-step guide:

Prerequisites:

Python 3.7 or higher: Ensure you have Python 3.7 or higher installed on your system.
Pip package manager: Install the pip package manager if you don’t already have it
Hugging Face Transformers library: Install the Hugging Face - -
Transformers library using pip. This library provides the necessary tools for interacting with the Bloom API.
pip install transformers
Import the necessary classes from the Transformers library in your Python script. This will allow you to access the Bloom API functionality.
from transformers import AutoTokenizer, AutoModelForSequenceClassification
Specify the pre-trained Bloom model you want to use. The Bloom API currently offers two models: Bloom 176B and Bloom 1.5B.
model_name = “bigscience/bloom”
Download the pre-trained Bloom model from the Hugging Face model hub. This will download the model’s weights and configuration files.

tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForSequenceClassification.from_pretrained(model_name)

Key Features of Bloom LLM API

The Bloom LLM API stands out for its exceptional capabilities and versatile applications. Here are some of its key features:

1. Large Model: Bloom LLM boasts a massive parameter count of 176 billion, enabling it to capture intricate patterns and nuances in human language.

2. Multilingual Support: Bloom LLM can process and generate text in 46 natural languages, making it suitable for cross-lingual communication and content creation.

3. Creative Text Generation:
Bloom LLM can generate creative text formats, including poems, code, scripts, musical pieces, emails, letters, and more.
Translation Accuracy: Bloom LLM excels at translation, accurately converting text between multiple languages while preserving context and meaning.

4. Question Answering Prowess: Bloom LLM provides comprehensive and informative answers to complex and open-ended questions, even when the questions are ambiguous or have multiple interpretations.

5. Code Generation Versatility: Bloom LLM can generate high-quality code in various programming languages, assisting developers in their coding tasks.

6. Summarization Simplicity: Bloom LLM effectively summarizes lengthy texts, capturing the essential information while maintaining clarity and coherence.

7. Code Completion Efficiency: Bloom LLM suggests relevant code snippets when provided with partial code, improving coding efficiency and reducing errors.

8. Debugging Assistance: Bloom LLM helps programmers identify and resolve errors in their code, facilitating efficient debugging and code optimization.

Key features to consider when choosing an LLM API

When choosing an LLM API, there are several key factors to consider, including:

Model size: The size of the LLM model is a key factor to consider, as it will affect the model’s capabilities and performance. Larger models are generally more powerful and capable of performing a wider range of tasks, but they can also be slower to run and more expensive to use.

Task support: It is important to choose an LLM API that supports the specific tasks you need it for. Some APIs are specifically designed for certain tasks, such as text generation or translation, while others are more general-purpose.

Pricing: LLM APIs can vary widely in terms of pricing. Some APIs are free to use, while others charge a fee per request or month. It is important to choose an API that fits your budget.

Documentation and support: It is important to choose an LLM with good documentation and support. This will help you when you run into issues.

Text to speech with Javascript

Barri — Mon, 05 Feb 2024 00:01:32 +0000

Text-to-speech (TTS) is an assistive technology that has gained much popularity over the years. It is also called 'read aloud' technology. This is because TTS converts written words or text into speech by reading them aloud.

TTS has been incorporated into many websites, apps and digital devices. It is a notable alternative to text, extending the reach of content and audience. It is being used today not just as an alternative for text, but also for educational purposes.

Though written text still reigns supreme, TTS popularity is largely based on the advantages it offers over static text.

It helps people with reading difficulties
It is convenient
It helps people with alternative learning styles
It is accessible.

How TTS works

Majority of TTS are inbuilt. The browser, app or software have inbuilt tools to convert text to speech. Example, Google Doc has an accessibility setting where readers can choose to 'Turn on screen reader support'.

Some TTS are softwares downloaded to a device and enabled on a browser or page where it is needed. This works primarily for pages or apps without an inbuilt TTS.

TTS are applied in different forms. Some highlight words as they are read. Some have options like start, stop, pause and cancel, giving the reader more control over how it is used. They are also options to change the voices of the reader.

For the sake of this article, we will look at text-to-speech API on websites using JavaScript.

Why JavaScript?

JavaScript is a modern programming language that extensively covers all web-related technology. It is also called the language of the web.
Javascript, fused with HTML5 has a broad reach of DOMs and APIs that make it easier to write some functionality into a website, including a text-to-speech functionality which uses the Web Speech API.

Web Speech API

Web speech API is an API that allows us to incorporate voice data or speech into web apps. It provides two distinct functionalities - SpeechSynthesis (text-to-speech) and Speech Recognition.

SpeechSynthesis is the synthesizer that allows apps to read text aloud from a device or app. It is the control interface of Web Speech API text-to-speech service.

Speech recognition is different from text-to-speech because it involves giving voice commands to the application.

Getting Started with SpeechSynthesis

The speechsynthesis functionality is a robust controller with properties and methods that regulates how text is converted to speech. To convert text-to-speech, we only need to create an instance of the speechsynthesisutterance class and configure it with the properties and methods attached to it.

let speech = new SpeechSynthesisUtterance();

Speechsynthesis has six properties, they include,

Language: This gets and sets the language of the utterance.
Pitch: Sets the pitch at which the utterance will be spoken at. It ranges from 0 - 2. 0 being the lowest and 2 being the highest. We can adjust it using a slider.
Rate: Sets the rate at which the utterance will be spoken at. The rate ranges from 0.1 to 10, with 0.1 being the lowest and 10 being the highest. Visually, we can set it using a slider.
Volume: Sets the volume at which the utterance will be spoken. The volume is a range from 0 to 1. 0 being lowest and 1 being the highest. We will set it visually using a slider.
Text: Gets and sets the text that will be synthesized.
Voice: Sets the voice that will be spoken.

It takes methods like
.cancel(): This is like a stop. It removes all the utterances from the utterance queue.
.getvoices(): This gets the voices available on the Web Speech API synthesizer.
.pause(): This pauses an utterance
.resume(): This is fired when an utterance is paused.
.speak(): This reads an utterance aloud.

To simply convert a text to speech

<script>
let speaknow = new SpeechSynthesisUtterance('Hello world!');
window.speechSynthesis.speak(speaknow);

</script>

To check for browser support, since not all browsers support the API

<html>
 <body>

   <button onclick="play()">Play</button>

</body>
</html>


<script
 function play() {
      if ('speechSynthesis' in window) {
        let working = new SpeechSynthesisUtterance("This is working");
        window.speechSynthesis.speak(working);
      }
   else{
     document.write("Browser not supported")
   }
    }
</script>

Next, we will create a simple demo with HTML, CSS and JS to show how Web Speech API can be implemented in browsers and websites.

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Web API TTS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
  <div>
  <h3> Select Voices </h3>
  <select id = "voices" >
    <option> option 1 </option>
  </select>
  </div>

  <div id = "vpr">
    <h5> Volume </h5>
  <input type="range" min="0" max="1" value="0.5" step="0.1" id="volume" />
        <span id="vol-label">1</span>

    <h5> Rate </h5>
  <input type="range" min="0" max="10" value="0.5" step="0.1" id="rate" />
        <span id="rate-lab">1</span>

    <h5> Pitch </h5>
  <input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
        <span id="pitch-lab">0.5</span>
  </div>

  <textarea rows = "9" cols = "60" name = "description" id = "lines">
            Enter text here...
         </textarea><br>

    <button class = "buttons" style = "background: green;" id = "speak"> Speak </button>
    <button class = "buttons" style = "background: orange" id = "pause"> Pause </button>
    <button class = "buttons" style = "background: lightgreen" id = 'resume'>Resume </button>
    <button class = "buttons" style = "background: red" id = 'cancel'> Cancel </button>

</body>
</html>

CSS

html, body{
    height: 100%
  }

select{
  padding: 3px;
  margin: 10px 0;
}

#vpr {
  display:inline-block;
  padding: 30px 10px;
}

.buttons{
  display: inline-block;
  padding: 0.6em 1.5em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: black;
  text-align: center;

}

// First we initialize new SpeechSynthesisUtterance object
let tts = new SpeechSynthesisUtterance();

// Setting the Speech Language
tts.lang = "en";

//Populating the select dropdown with the list of available voices on Web Speech API

let speechvoices = []; // global array of available voices

window.speechSynthesis.onvoiceschanged = () => {
  // To get the list of voices using getVoices() function
  speechvoices = window.speechSynthesis.getVoices();

  // We need to populate the section and set the first voice
  tts.voice = speechvoices[0];

  let select_voice = document.getElementById("voices");
  speechvoices.forEach((voice, i) => (select_voice.options[i] = new Option(voice.name, i)));
};

//SETTING THE CONTROLS - SPEAK, PLAY, PAUSE AND RESUME

//SPEAK
//first we get the value of the textarea or document
document.getElementById("speak").addEventListener("click", () => {
  tts.text = document.getElementById("lines").value;

  //then we implement the speechsynthesis instance
  window.speechSynthesis.speak(tts);
});


//PAUSE
document.getElementById("pause").addEventListener("click", () => {
  // Pause the speechSynthesis instance
  window.speechSynthesis.pause();
});

//RESUME
document.getElementById("resume").addEventListener("click", () => {
  // Resume the paused speechSynthesis instance
  window.speechSynthesis.resume();

  });

//CANCEL
document.querySelector("cancel").addEventListener("click", () => {
 // Cancel the speechSynthesis instance
  window.speechSynthesis.cancel();
});

//TO SET THE VOLUME, PITCH, AND RATE

 //Volume 

  //We get the volume value from the input
  document.getDocumentById("volume").addEventListener("input", () => {
  const vol = document.getDocumentById("volume").value;

  // Set volume property of the SpeechSynthesisUtterance instance
  tts.volume = vol;

  // Updating the volume label
  document.querySelector("#vol-label").innerHTML = vol;
});


  //RATE
   // We get the rate Value from the input
document.getDocumentById("rate").addEventListener("input", () => {
  const rate = document.getDocumentById("rate").value;

  // Set rate property of the SpeechSynthesisUtterance instance
  tts.rate = rate;

  // Updating the rate label
  document.getDocumentById("rate-lab").innerHTML = rate;
});


//PITCH
  // We get the pitch Value from the input
document.getElementById("pitch").addEventListener("input", () => {

  const pitch = document.getElementById("pitch").value;

  // Setting thepitch property of the SpeechSynthesisUtterance instance
  tts.pitch = pitch;
  // Updating the pitch label
  document.getDocumentById("pitch-lab").innerHTML = pitch;
});

Although we have populated the voices in the drop down, they won't change to the selected voice unless we use the onchange function to target that.

// This changes the voice of the speaker or utterance to the selected voice
document.getDocumentById("voices").addEventListener("change", () => {
  tts.voice = voices[document.getDocumentById("voices").value];
});

Browser Compatibility

Web API SpeechSynthesis enjoys full support of Chrome, Edge, Firefox, Opera and Safari. Internet Explorer does not support this API. The onvoiceschanged() method is the only method not supported by Safari and Opera.

Helpful Javascript Oneliners to Make Your Code Cleaner

Barri — Wed, 31 Jan 2024 22:24:50 +0000

Javascript is unarguably one of the most popular programming languages in the world today. It is home to vanilla programming, multiple frameworks, complex apis, and a wide range of libraries, modules and functions.

Whether you are a newbie or a more experienced developer, using one-liners is a cool way to do more things with Javascript. In this article, we will be looking at over 12 Javascript one-liners that will make your code cleaner. They are simple, easy to remember, and show proficiency in using methods.

Lets go!

Eligibility to vote
This function checks if a citizen is eligible to vote. The minimum age of voting is set to 18. It uses a function called ternary operator.
// To check the eligibility to vote

let age = 25;
let votingelig = (age >= 18) ? "You are eligible to vote." : "You are not eligible to vote yet";

document.write(votingelig);

To get the last occurrence of a value
We can get the last occurance of a string using lastIndexOf() method to locate/search that specific value.

let lastoccurance = 'Jerusalem'.lastIndexOf('e');

document.write(lastoccurance);

Getting the domain name from an email

Here, we use substring() and IndexOf() methods to extract a substring from a string.

let getdomain = 'codecodablog@gmail.com'.substring('codecodablog@gmail.com'.indexOf('@') + 1);

document.write(getdomain);

No Fives
This program aims to get the count of numbers within a certain range but will not count any number with a 5 in it. For example, the range of numbers between 4 and 16 will return 11 because 5 and 15 were omitted. The result though can have a five.

//Getting the count of a range of numbers but no fives
nofives = (a, b) => Array.from(Array(b - a + 1), (b, i) => a + i).filter(b => !/5/.test(b)).length;


document.write(nofives(12,49))

Find the length of the shortest word
Given a string of text, this program will return the length of the shortest word.

//To get the length of the shortest word in the text
const findShortestword = (s) => s.split(" ").sort((a, b) => b.length - a.length).pop().length;

document.write(findShortestword("Bad situations cannot last"))

Checking a number to see if it is positive, negative or zero

Here, we will check if a number is positive, negative or zero

// program to check if number is positive, negative or zero
let d = -10;
let result = (d >= 0) ? (d == 0 ? "zero" : "positive") : "negative";
document.write(`Number is ${result}.`);

Getting the square root of numbers
To get the square root of a set of numbers, we use the map() and Math() inbuilt functions.

//simple calculations to get the square root of a set of numbers
let sqroot = [9, 36, 49].map(Math.sqrt);
document.write(sqroot);

The sum of numbers
To calculate the sum of numbers in a given array we use the reduce() function. The reduce() function like it's name implies reduces an array to a single value. Its return value is stored in the form of totals.

//calculating the sum of the numbers
const Sum = nos => nos.reduce((a,b) => a + b, 0)
document.write(Sum([8, 34, 6, 29, 2, 1]))

To get minimum value
This is just the opposite of getting the maximum value. In this case, we want the minimum value.

//min number
const minnum = nos => Math.min(...nos);

document.write(minnum([5, 10, 15, 20, 25, 30, 35]))

Calculating a random number from a range of numbers
Using Math() function, here we get a random number from a range of numbers

//calculating a random number from a range of numbers

let a = Math.floor(Math.random() * (45 - 35 + 1)) + 35
document.write(a)

Converting a string to an array
To convert a string to an array, we use the split() method. split() divides a string into an array of substrings. Split() accepts a separator as one of it's parameters to determine where each split should occur.

If the separator is not given, the split returns the entire string.

//converting a string to an array
let str = 'This is a string'.split(' ');

document.write(str);

Executing a function on every element of an array
To perform a function on every element of an array, we will use the forEach() method.

let letters = ['X', 'Y', 'Z'];

letters.forEach(function (e) {
    document.write(e);
});

Multiple Variable Assignment
Javascript is flexible enough to allow us reassign variables and this can be done in a single line

//multiple assignment
let [w,x,y,z] = [30,84,28,"BABY"]
document.write(w, x, y, z)

Conclusion

Understanding of inbuilt functions play a large role in writing shorter codes.

Arrow functions, introduced in ES6, is also a fun way of writing shorter functions. They take only one statement that returns a value. Brackets, the function and return keyword are also not needed. This makes them the perfect syntax for one-liners.

Ternary operators also cut down the overuse of 'if' in conditional statements, allowing simple logical statements to be written in just one line.

To become a pro at writing one-liners, it is important to check these out and understand them.

Javascript Promise

Barri — Tue, 30 Jan 2024 22:23:51 +0000

Javascript Promise is one of the features that was rolled out in ES6 in 2015. Promises in Javascript operate within the same premise as a promise in real life. As a person can make a promise, so can Javascript.

For example, I could say, "I promise to learn Javascript Promise this year".

Now promises aren't just made. When we make promises, we strive to fulfil them and sometimes we fail. If I learn Javascript this year, then I will keep my promise. If I don't, then I failed to keep that promise.

So a promise ends up either being fulfilled and kept or unfulfilled and failed. These terms are translated in Javascript as resolved or rejected. A fulfilled promise is a resolved one, while a failed one is a rejected promise.

Callbacks and Asynchronous actions

Before we delve fully into promise, we will look at callbacks and asynchronous programming. Why do we need to know about callbacks and asynchronous programming? Because they are tied to promises and promises are one of the ways to deal with them.

A callback function is a function that is written as an argument and passed to another function (the outer function), and invoked there. The passed argument can be executed by the outer function immediately or later. Javascript supports callbacks and implements them in subroutines, lambda expressions, blocks or function pointers.

There are two types of callbacks named based on how they control data flow at runtime. They are synchronous callbacks which are the default callbacks or deferred callbacks, also called asynchronous callbacks.

Synchronous callbacks are the callbacks that are executed immediately while asynchronous callbacks are executed later.

Asynchronous in Javascript refers to two events or threads happening at the same time, simultaneously. Not waiting for the previous one to complete. In asynchronous programming, a program can make a request from another software or server and do other things in the background while it waits for a reply.

Javascript Promise and why it is important.

A Javascript promise is an asynchronous process that produces an unknown value at a later time. According to MDN "A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason."

Javascript is single threaded. This means two or more scripts cannot run at the same time. They always have to run one after the other. This makes programming with it slow, time consuming and monotonous. Once a network sends a request, it can do nothing else until it receives a response. Only one request is sent at a time.

Objects and events in programming try to emulate human behaviour and Javascript's single threading does not replicate human behaviour. Humans are multi-threaded. We perform different actions simultaneously and asynchronously. A human can talk and cook at the same time. We can type with both hands.

Promises, callbacks and asynchronous programming are a great way to perform multi-thread actions. Multiple requests and time-consuming actions can be performed simultaneously without blocking the main thread.

Features of Javascript Promise

1. A promise is asynchronous in nature.
2. It has two default callbacks - reject and resolve.
3. The output, value or result is unknown at the time of creation.
4. It is a good way to overcome the issues that arise from simple and nested callbacks.
5. The result of a promise is immutable. It's state cannot be changed.

Syntax of a Javascript promise

A promise object is created by using the new keyword followed by the keyword - Promise. It takes function and one one argument. This argument takes two default callbacks - reject and resolve.

var dosomething = new Promise(function(resolve, reject) {
 // code goes here

 if (/* expression goes here */) {
   resolve("Yes, this works!");
 }
 else {
   reject("Oh No! It didn't work");
 }
});

Resolved holds the output for a successful promise while reject holds the output for an unsuccessful promise.

.then() and .catch() handlers

.then() and .catch() are two two handlers attached to callbacks in promises. .then() is attached to a resolved promise while .catch() is attached to a rejected promise.
Let us look at demos on how to use promises and their handlers.

<body>
<script>
let man = new Promise(function(resolve, reject){

    man_full = true;
    if(man_full)
     resolve()
     else
     reject()

});
   man.then(function(){
       document.write("Stop Eating!")
   }).catch(function(){
       document.write("You stop eat more!")
   })

   //output: Stop Eating
   //if we change the value of man_full to false, it becomes 'You should eat more'
</script>
</body>

Promises work with arrow functions which were also implemented in ES6. In the next demo, we will use an arrow function with parameters to give custom outputs.

<body>
<script>
let sum = new Promise((resolve, reject) =>{
    let add = 24 + 24;
    if (add == 49){
        resolve('Correct Answer!')
    }
    else {
        reject('Incorrect!')
    };
});

sum.then((custom_msg) =>{
    document.write("This is a "+ custom_msg)
}).catch((custom_msg) => {
    document.write("This is " + custom_msg)
});

//the custom msg with resolve callback is appended to the message for .then()
//the custom msg with reject callback is appended to the message for .catch()
        </script>
</body>

Static methods of promises

Promise.all()
This is a promise API that executes two or more promises in parallel. For example, if we have to download certain files all at once, it will process them and give a value once they are all resolved.
It takes an array of promises and returns a new promise. The new promise is the value

<body>
<script>
const download_one = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('First download completed');
    }, 5000);
})


const download_two = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('Second download completed');
    }, 3000);
})
const download_three = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('Third download completed');
    }, 1000);
})

Promise.all([
     download_one,
     download_two,
     download_three
]).then((msgs) => {
     document.write(msgs);
}).catch((msgs) => {
     document.write(msgs);
})

</script>
</body>

It takes about 5 seconds for the output to display since the longest time is 5 seconds for the first download. The order of the output appears the same way as they are written even though the first download takes the longest to process.

This shows just how promise.all() works, executing and processing actions in parallel. If for any reason any of the promises listed is failed or rejected, promise.all() rejects everything and the error message is displayed.

const download_one = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('First download completed');
    }, 5000);
})

const download_two = new Promise((resolve, reject) =>{
    setTimeout(() => {
        reject(new Error('Error with second download'));
    }, 3000);
})

const download_three = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('Third download completed');
    }, 1000);
})

Promise.all([
     download_one,
     download_two,
     download_three
]).then((msgs) => {
     document.write(msgs);
}).catch((msgs) => {
     document.write(msgs);
})

Promise.allSettled()
Since promise.all() takes an 'all or nothing' approach where it rejects the entire list if one promise is rejected, promise.allSettled() takes a more relaxed approach. It insteads shows the status of each promise according to the value or result.
Fulfilled promise = result
Rejected promise = error

<body>
<script>
const download_one = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('First download completed');
    }, 5000);
})

const download_two = new Promise((resolve, reject) =>{
    setTimeout(() => {
        reject(new Error('Error with second download'));
    }, 3000);
})

const download_three = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('Third download completed');
    }, 1000);
})

Promise.allSettled([
     download_one,
     download_two,
     download_three
]).then((msgs) => {
     console.log(msgs);
}).catch((msgs) => {
     console.log(msgs);
})

/*
Output
0:{status: "fulfilled", value: "First download completed"}
1: {status: "rejected", reason: Error: Error with second download}
2: {status: "fulfilled", value: "Third download completed"}
*/
</script>
</body>

Promise.race()
promise.race() returns an output once one of the promises is completed. Unlike promise.all(), it doesn't wait for the entire promises listed to be completed before it returns a value. It doesn't matter if that promise is a fulfilled or rejected promise.

<body>
<script>

const download_one = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('First download completed');
    }, 5000);
})

const download_two = new Promise((resolve, reject) =>{
    setTimeout(() => {
        reject(new Error('Error with second download'));
    }, 3000);
})

const download_three = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('Third download completed');
    }, 1000);
})

Promise.race([
     download_two,
     download_one,
     download_three
]).then((msgs) => {
     console.log(msgs);
}).catch((msgs) => {
     console.log(msgs);
})

//OUTPUT
//Third download completed
</script>
</body>

The output says 'Third download completed', because the value for the third download is displayed first, since it has the shortest settimeout.

Promise.any()
Promise.any() behaves similarly to promise.race(), but it picks the first fulfilled or resolved promise to display.

<body>
<script>
const download_one = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('First download completed');
    }, 5000);
})

<body>
<script>
const download_two = new Promise((resolve, reject) =>{
    setTimeout(() => {
        reject(new Error('Error with second download'));
    }, 1000);
})

const download_three = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve('Third download completed');
    }, 3000);
})

Promise.any([
     download_two,
     download_one,
     download_three
]).then((msgs) => {
     console.log(msgs);
}).catch((msgs) => {
     console.log(msgs);
})

//OUTPUT
//Third download completed

</script>
</body>

The second download was reset to have the shortest timeout of 1 second. But because it is a failed promise, it wasn't acknowledged and the second shortest - the third download was picked.

States of a Promise

A promise has four states or behavior

Pending: The pending state of a promise is the waiting state of the promise. This is the state when we neither have a resolved nor rejected promise.
Fulfilled: This is an asynchronous operation that was completed successfully. It returned a value or a fulfilled promise.
Rejected: An asynchronous operation was not successful. It returned an error and a rejected promise.
Settled: This is a processed promise that has been rejected or fulfilled. It is the final outcome of an asynchronous promise operation. A settled promise is immutable.

Conclusion

Using promise with asynchronous operations has many benefits. It flattens the code, makes it more readable and maintainable. It also helps to handle asynchronous operations better, much better than callbacks.
Promise is a modern object and it works well with modern browsers, but if browser compatibility issues arise, these could be overridden with polyfills.

How to Style Streamlit Metrics in Custom CSS

Barri — Sat, 18 Mar 2023 08:22:02 +0000

Steamlit has established itself as an interactive, open-source framework for visualising and displaying charts, graphs, plots and ML models in a web app. Like its predecessor and rival, Dash, it plays a big role in analytics, AI, and ML visualization — areas where traditional BI dashboards cannot reach.

There are many advantages to using streamlit for data science, machine learning and visualisation. I find streamlit very intuitive and I like its simplicity and ease of use. The learning curve is short, it provides valuable components called widgets for easy arrangement and ordering of data, but my personal favourite is that everything is done in pure Python and deployed as a webapp. Streamlit framework supports all major libraries associated with data science and data visualization. This has made it a personal favourite of many and has pushed its fast rise in a short time.

Unlike Dash, Streamlit is limited in how it can be styled within the framework of the app. This can be frustrating for users who want to work with colors, and different styles to grab the attention of the audience. Using the markdown functionality of streamlit, I’ll be walking us through how we can include an external CSS file to style a metric widget.

What you’ll need

A working streamlit application
Knowledge of basic CSS

The Metric Widget

The metric widget is an API reference that displays KPIs and quantitative figures, like numbers in a card-like format. It takes five parameters — label, value, delta, delta_color and help.

The label is the title for the metric. The value is the value of the metric. This is the text/number that will be displayed boldly. The delta is the indicator of how the metric has changed and is displayed with an arrow below the value. The delta_color is the colour of the delta and help is an optional tooltip displayed next to the label.

Streamlit's official API documentation for the metric widget has this code as their use case.

col1, col2, col3 = st.columns(3) col1.metric(“Temperature”, “70 °F”, “1.2 °F”) """Temperature is the label, 70 °F is the value and 1.2 °F is the delta.""" col2.metric(“Wind”, “9 mph”, “-8%”) col3.metric(“Humidity”, “86%”, “4%”) """A neat combination of st.columns with metrics."""

Screenshot by Author

The output is the image above. It places the three metrics side by side, but there is no telling where each metric card starts or ends. All figures and their delta are on a bland white background.

Analyzing the data

To create our metric, I’ll be using the Avocado Prices (2020) dataset from Kaggle. We will analyze it to determine what our metric values will be. In this case, I want the total sales of each year (2015–2020) and the percentage increase in sales between 2015–2020 to be displayed as a metric.

To get each year, I subsetted the year column and filtered it by the different years. Each year has its own variable — the value of which is rounded to one decimal place. This variable will be the value of our metric.

import pandas as pd import streamlit as st import plotly.express as px st.header(“Avocado Interactive Sales Visualization with Streamlit”) df = pd.read_csv(“avocado-updated-2020.csv”) """PANDAS ANALYSIS""" df.drop_duplicates(inplace = True) """drop duplicates""" st.write(“””Total Bags of Avocados Sold Through 2015–2020“””) """ to calculate the total number of bags sold each year""" """2015""" yr_15 = round(df[df[‘year’] == 2015][‘total_bags’].sum()) """2016""" yr_16 = round(df[df[‘year’] == 2016][‘total_bags’].sum()) """2017""" yr_17 = round(df[df[‘year’] == 2017][‘total_bags’].sum()) """2018""" yr_18 = round(df[df[‘year’] == 2018][‘total_bags’].sum()) """2019""" yr_19 = round(df[df[‘year’] == 2019][‘total_bags’].sum()) """2020""" yr_20 = round(df[df[‘year’] == 2020][‘total_bags’].sum()) """calculate percentage increase between 2015 and 2020""" per_increase = round((int(yr_20 — yr_15)/ yr_15) * 100, 1) percent_increase = f”{per_increase}%”

St.Markdown and Unsafe HTML

Create a new file and name it using the .css extension. For this project, our CSS sheet is called ‘style.css’.

Within our python file, we need to create a path that links to the external CSS file. We will use st.markdown to link to the file and override Streamlit’s default position not to allow HTML code in their application.

Streamlit is concerned about developers deploying unsafe apps if HTML is allowed in the code. The idea is that users should always be able to trust Streamlit applications, and with HTML in the code, applications become vulnerable and susceptible to hacks. To turn it on, we will switch the unsafe_allow_html to become True.

The Markdown code plays an important role here. It houses the HTML code that reads the CSS styling and also turns on the HTML.

"""LINK TO THE CSS FILE""" with open(‘style.css’)as f: st.markdown(f”<style>{f.read()}</style>”, unsafe_allow_html = True)

Creating the metrics

I created two different sets of columns. The first set takes four metrics and the second takes three.

The delta in this analysis is the percentage difference between the previous year and the current year.

"""WE CREATE FOUR COLUMNS HERE TO HOLD THE METRIC""" col1, col2, col3, col4 = st.columns(4) col1.metric(label = “2015 Sales”, value = (yr_15), ) col2.metric(label = “2016 Sales”, value = (yr_16), delta = round(float((yr_16 — yr_15)/yr_15) *100, 1) ) col3.metric(label = “2017 Sales”, value = (yr_17), delta = round(float((yr_17 — yr_16)/yr_16) *100) ) col4.metric(label = “2018 Sales”, value = (yr_18), delta = round(float((yr_18 — yr_17)/yr_17) *100,1) ) st.markdown(“<hr/>”, unsafe_allow_html = True) col5, col6, col7 = st.columns(3) col5.metric(label = “2019 Sales”, value = (yr_19), delta = round(float((yr_19 — yr_18)/yr_18) *100, 1) ) col6.metric(label = “2020 Sales”, value = (yr_20), delta = round(float((yr_20 — yr_19)/yr_19) *100) ) col7.metric(label = “% increase between 2015–2020”, value = (percent_increase)

This is what the dashboard looks like.

Screenshot by Author

Styling the CSS

Inspect the web app page where your streamlit application is running and extract the id of the metric columns. They usually don’t change so you can use the one in the CSS code of this tutorial.

Screenshot by Author

NB: The id for three columns is different from that of the four columns. If your page has multiple columns of the same number, one id affects them all.

For example, if you have a set of three columns to hold three metrics and another three columns to hold different plots; when you inspect it, you’ll find they both have the same CSS id. Any CSS styling done to the column with metrics will affect the column with plots.

/* use this code inside your css file */ div.css-12w0qpk.e1tzin5v2{ background-color: #f5f5f5; border: 2px solid; padding: 20px 20px 20px 20px; border-radius: 10px; color: #ffc300; box-shadow: 10px; } div.css-1r6slb0.e1tzin5v2{ background-color: #f5f5f5; border: 2px solid; /* #900c3f */ border-radius: 10px; padding: 20px 20px 20px 70px; color: green; } div.css-50ug3q.e16fv1kl3{ font-weight: 900; }

Our CSS code changes the background color, highlights the borders around each metric value, and changes the font color, font size of the text and paddings in each border. In the end, we have a dashboard that looks like this:

Screenshot by Author

The app is deployed here on Streamlit Cloud.

Conclusion
There are many ways you can style metrics on your dashboards. One fun way would be to make them circular. This would look good on short figures or text. You should also check out Streamlit's full documentation here on how to use metrics and markdowns.

How not to remain in the learning phase

Barri — Mon, 28 Sep 2020 20:42:01 +0000

When i first started learning how to code, i took tutorials from Bucky Roberts on Youtube, then i went to w3school, freecodecamp, udemy and andela - learning the same stuff.

At first i told myself it was because i really had to understand what i was doing, but i was stuck in the learning phase. I wanted to learn everything and never felt good enough to try out things on my own. Most importantly, i didn't know when to stop learning. I feel much better now that i have broken free from that cycle, but i also feel concerned about other newbies who might be stuck in the same predicament.

So, when did you know it was time to put yourself out there? When did you actively stop learning?

Understanding Python's Dictionary and Data Structure

Barri — Thu, 14 Nov 2019 18:12:07 +0000

Dictionaries are one of python's powerful datatype and yet they are quite underrated. Focus is placed more on Lists as they behave like arrays. Unlike lists, dictionaries are enclosed in curly braces - {} - and the values are unordered and changeable. Dictionaries make use of keys and values. The index is the key. It is unique and immutable (meaning it must either be a string, tuple or integer). The values are more flexible and can be any datatype. The key to its associated value is called a key-value pair.

The keys and It's associated value is separated by a semicolon. As an example, we'll write a dictionary that maps the value of countries and their capitals.

countries = {"USA": "Washington", "Nigeria" : "Abuja", "Croatia": "Zagreb", "Ghana" : "Capetown"}

The dictionary keys here are USA, Nigeria, Croatia, and Ghana, which happens to be the name of the countries. While Washington, Abuja, Zagreb, and Capetown are the values and are capitals of the respective countries.

Accessing data in a dictionary

To print out the entire dictionary

print(countries)

#{"USA": "Washington", "Nigeria" : "Abuja", "Croatia": "Zagreb", "Ghana" : "Capetown"}

To access particular or specific information, we use the variable name with the key inside square brackets.

countries['Nigeria']
#Abuja

This prints 'Abuja' as output, which is the capital of Nigeria is Abuja
Note that the keys are case sensitive. countries['nigeria'] will return an error while countries['Nigeria'] will return 'Abuja'.

Updating a dictionary

Let's say we made a mistake, just like we did since Capetown is not the capital of Ghana (haha, you didn't know that, did you?) and we need to update and correct this information. To change the value of Ghana,

countries['Ghana'] = 'Accra' print(countries)
#{"USA": "Washington", "Nigeria" : "Abuja", "Croatia": "Zagreb", "Ghana" : "Accra"}

You will notice the value of Ghana has been modified to Accra.
We can also add a new country to the list by doing the same thing we did with Ghana, only this time, the key would be the name of the new country we are to add to the list.

countries['Japan'] = 'Tokyo' print(countries)
#notice that japan has been added to the list.

Deleting a dictionary

You can remove targeted keys from a dictionary. Note that you can't delete a key without deleting its associated value. They both go together. You can also delete the entire dictionary using the del keyword.

del countries
#this will delete the entire countries dictionary. Don't use this unless you are absolutely sure you won't need the dictionary ever.
del countries['Ghana']
# will delete Ghana and it's value, Accra.

Using get()

The method get() returns a value for the given key. If the key is not available it returns None or an optional fallback or default value.

print('Capital of Nigeria is', countries.get('Nigeria'))
#Capital of Nigeria is Abuja

The output returns Abuja because Nigeria is on the dictionary collection. If we were to get the capital of a country like Zambia, the output would be

print('Capital of Zambia is', countries.get('Zambia'))
#Capital of Zambia is None

This is because Zambia is not on the list. We can also set an optional value to be returned if a key is not found.

('Capital of Zambia is', countries.get('Zambia', 'notfound'))
#Capital of Zambia is notfound

Using the 'in' keyword for dictionaries

Like lists, we can loop through dictionaries using the 'in' operator keyword.

for x in countries: print(x)

#USA, Nigeria, Croatia and Japan

This returns only the keys of the dictionary. To return the values as well, we will use the value() function

for x in countries.values(): print(x) or for x in countries: print((countries[x]))

#this returns all the values of the keys

To get the keys only, we can use the keys() function

for x in countries.keys(): print(x)

To get both keys and values mapped together, we will use the items() function

for x in countries.items(): print(x)

# ('USA', 'Washington') ('Nigeria', 'Abuja') ('Croatia', 'Zagreb') ('Japan', 'Tokyo')

Nested Dictionaries

Dictionary values can be of any data type. It can hold lists and even other dictionaries. In this part, I'll show you how nested dictionaries are accessed.

countries = {'USA' : 'Washington', 'Nigeria' : 'Abuja', 'Croatia' : 'Zagreb', 'Japan' : 'Tokyo', 'SouthAfrica' : {"Johannesburg":['Pretoria', 'Soweto', 3]}}

I added another dictionary with key as 'Johannesburg' which contains a list of 3 items. This shows the dynamicity of dictionaries. To print out Soweto from this list,

countries['SouthAfrica']['Johannesburg'][1]
[1] is the index number of Soweto from the list.

Python dictionaries have methods and functions that I could not cover here. You can check out
https://www.programiz.com/python-programming/methods/dictionary/ to read more on it.