DEV Community: Gavi Narra

Training a Simple Neural Network in PyTorch and Integrating with Gradio for MNIST Digit Recognition

Gavi Narra — Tue, 23 May 2023 17:35:39 +0000

Introduction

In this article, we will walk through the steps of training a simple neural network on the MNIST dataset using PyTorch and then deploying it with Gradio for interactive predictions. The MNIST dataset is a popular dataset in the field of machine learning that consists of 70,000 28x28 grayscale images of handwritten digits.

Training a Neural Network with PyTorch

PyTorch is an open-source deep learning framework developed by Facebook's artificial intelligence research group. It provides a wide range of functionalities for building and training neural networks.

Step 1: Import necessary libraries

First, we need to import PyTorch, torchvision (a package with popular datasets, model architectures, and common image transformations), and some other necessary libraries:

import torch
import torchvision
import torchvision.transforms as transforms
from torch import nn, optim

Step 2: Load the dataset

Next, we load the MNIST dataset. We'll use torchvision's built-in functionality to do this. We also apply transformations to normalize the data:

transform = transforms.Compose([transforms.ToTensor(), transforms.Normalize((0.5,), (0.5,))])

trainset = torchvision.datasets.MNIST(root='./data', train=True, download=True, transform=transform)
trainloader = torch.utils.data.DataLoader(trainset, batch_size=64, shuffle=True)

testset = torchvision.datasets.MNIST(root='./data', train=False, download=True, transform=transform)
testloader = torch.utils.data.DataLoader(testset, batch_size=64, shuffle=True)

Step 3: Define the network

We'll define a simple feed-forward neural network with one hidden layer:

class Net(nn.Module):
    def __init__(self):
        super(Net, self).__init__()
        self.fc1 = nn.Linear(28 * 28, 128)
        self.fc2 = nn.Linear(128, 10)

    def forward(self, x):
        x = x.view(-1, 28 * 28)
        x = torch.relu(self.fc1(x))
        x = self.fc2(x)
        return x

net = Net()

Step 4: Define the loss function and optimizer

We'll use CrossEntropyLoss for our loss function and SGD for our optimizer:

criterion = nn.CrossEntropyLoss()
optimizer = optim.SGD(net.parameters(), lr=0.01, momentum=0.9)

Step 5: Train the network

Now we're ready to train our network:

for epoch in range(10):  
    running_loss = 0.0
    for i, data in enumerate(trainloader, 0):
        inputs, labels = data
        optimizer.zero_grad()
        outputs = net(inputs)
        loss = criterion(outputs, labels)
        loss.backward()
        optimizer.step()

        running_loss += loss.item()
    print(f'Epoch {epoch+1}, loss: {running_loss/len(trainloader)}')
print('Finished Training')

Deploying with Gradio

Gradio is an open-source library for creating customizable UI components around your ML models. It allows us to demonstrate a model’s functionality in an intuitive manner.

Step 1: Install Gradio

!pip install gradio

Step 2: Import Gradio and define the prediction function

import gradio as gr

def predict(image):
    image = image.reshape(1, 1, 28, 28)
    image = torch.from_numpy(image).float()
    output = net(image)
    _, predicted = torch.max(output.data, 1)
    return predicted.item()

In the predict function, we take the input image, reshape it to match our model's expected input shape, convert it to a torch tensor, pass it through our model to get the output, and then return the predicted digit.

Step 3: Define the Gradio interface

Now, we define the interface for our model. We'll use an 'Image' input interface and a 'Label' output interface:

iface = gr.Interface(
    fn=predict,
    inputs=gr.inputs.Image(shape=(28, 28), invert_colors=True, source="canvas"),
    outputs="label",
    interpretation="default"
)

The 'Image' input interface lets users draw an image with their mouse. We set invert_colors=True because the MNIST dataset consists of white digits on a black background, and by default, the Gradio image interface has a white background.

Step 4: Launch the interface

Finally, we launch the interface:

iface.launch()

With this, you should see an interactive interface where you can draw a digit and see the prediction from your PyTorch model.

Conclusion

In this article, we saw how to train a simple neural network using PyTorch and then deploy it with Gradio for interactive predictions. This combination allows us to leverage the power of deep learning models in an easy-to-use and interpret manner.

Convert ChatGPT conversations to Obsidian (Markdown format)

Gavi Narra — Tue, 23 May 2023 16:50:18 +0000

I am usually asking ChatGPT the same questions and would like to store and index my chat history in Obsidian. First thing you need to do is to download your conversations. Follow the instructions here

https://help.openai.com/en/articles/7260999-how-do-i-export-my-chatgpt-history-and-data

Once you have done this, you will find a folder with your conversations and there is a json file with the data.

The following python script reads this json file and creates the each conversation as an output markdown file that you can just import to Obsidian

import json
import os
def get_conversation(node_id, mapping, list):
    node = mapping[node_id]
    if 'message' in node and node['message'] is not None:
        content_parts = node['message']['content']['parts']
        if len(content_parts) > 0:
            author_role = node['message']['author']['role']
            list.append(f"## {author_role}\n {''.join(content_parts)}")

    for child_id in node.get('children', []):
        get_conversation(child_id, mapping,list)

if __name__ == '__main__':
    folder_path = "output"
    # Check if the directory exists
    if not os.path.isdir(folder_path):
        # If not, create the directory
        os.makedirs(folder_path)
    with open('conversations.json') as f:
        data = json.loads(f.read())
        for item in data:
            title = item["title"]
            title = title.replace("/","_").replace('"','')
            if title == "New chat":
                title = "New chat " + str(int(item["create_time"]))
            root_node_id = [node_id for node_id, node in item['mapping'].items() if node['parent'] is None][0]
            list = []
            get_conversation(root_node_id, item['mapping'],list)
            with open(f'{folder_path}/{title}.md','w') as outfile:
                outfile.write('\n'.join(list))

Sometimes ChatGPT fails to create a title for your conversation and in that case, it just uses "New chat", the script above concatenates the create time epoch to make it unique.

Custom Mime Type with Python 3 http.server

Gavi Narra — Fri, 28 Apr 2023 19:01:24 +0000

I needed a quick web server when working with webgpu and needed a custom wgsl mime type.

For this you can just add a mime type the python3 in-built http.server module

import http.server
import socketserver
from urllib.parse import urlparse

# Define the custom MIME types
custom_mime_types = {
    ".wgsl": "text/javascript",
    # Add more custom MIME types here as needed
}

class CustomMimeTypesHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def guess_type(self, path):
        url = urlparse(path)
        file_ext = url.path
        pos = file_ext.rfind('.')
        if pos != -1:
            file_ext = file_ext[pos:]
        else:
            file_ext = ""

        # Check if the file extension has a custom MIME type
        if file_ext in custom_mime_types:
            return custom_mime_types[file_ext]

        # Fallback to the default MIME type guessing
        return super().guess_type(path)

# Set the handler to use the custom class
handler = CustomMimeTypesHTTPRequestHandler

# Set the server address and port
server_address = ("", 4001)

# Create the server and bind the address and handler
httpd = socketserver.TCPServer(server_address, handler)

print(f"Serving on http://{server_address[0]}:{server_address[1]}")
httpd.serve_forever()

WebGPU Compute

Gavi Narra — Wed, 26 Apr 2023 13:56:58 +0000

WebGPU is a new way to access the GPU using javascript API. The most exciting thing is this will be accessible to everyone starting today (April 26th 2023) in the stable branch of Google Chrome 113 and Microsoft Edge 113.

The main way to access the compute and rendering capabilities of the GPU is via a shader language. WebGPU comes with a rust like shader language.

I am interested in computing for deep learning. Lets see how we can do a basic Matrix addition using a shader language.

Below is a complete javascript for the addition. Name it matrix_addition.js

The different variables and their relationships are defined in this diagram

const rows = 2
const cols = 2


// Define global buffer size
const BUFFER_SIZE = new Float32Array(rows*cols).byteLength; 

// Compute shader
const shader = `
@group(0) @binding(0)
var<storage, read> input1: array<f32>;
@group(0) @binding(1)
var<storage, read> input2: array<f32>;
@group(0) @binding(2)
var<storage, read_write> output: array<f32>;

@compute @workgroup_size(64)
fn main(
  @builtin(global_invocation_id)
  global_id : vec3u,

  @builtin(local_invocation_id)
  local_id : vec3u,
) {
  // Avoid accessing the buffer out of bounds
  if (global_id.x >= ${BUFFER_SIZE}) {
    return;
  }

  output[global_id.x] = input1[global_id.x]+input2[global_id.x];
}
`;

// Main function

async function init() {
  // 1: request adapter and device
  if (!navigator.gpu) {
    throw Error('WebGPU not supported.');
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error('Couldn\'t request WebGPU adapter.');
  }

  const device = await adapter.requestDevice();

  // 2: Create a shader module from the shader template literal
  const shaderModule = device.createShaderModule({
    code: shader
  });

// 3: Create input (input1, input2) and  output (output) buffers to read GPU calculations to, 
// and a staging (stagingBuffer) buffer to be mapped for JavaScript access  
  const matrixA = new Float32Array(rows*cols).map((_,i) => 1);
  const matrixB = new Float32Array(rows*cols).map((_,i) => 2);

  const input1 = device.createBuffer({
    size: BUFFER_SIZE,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(input1, 0, matrixA, 0, matrixA.length);

  const input2 = device.createBuffer({
    size: BUFFER_SIZE,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(input2, 0, matrixB, 0, matrixB.length);


  const output = device.createBuffer({
    size: BUFFER_SIZE,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
  });

  const stagingBuffer = device.createBuffer({
    size: BUFFER_SIZE,
    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
  });

  // 4: Create a GPUBindGroupLayout to define the bind group structure, create a GPUBindGroup from it,
  // then use it to create a GPUComputePipeline

  const bindGroupLayout =
  device.createBindGroupLayout({
    entries: [{
        binding: 0,
        visibility: GPUShaderStage.COMPUTE,
        buffer: {
          type: "read-only-storage"
        }
    },{
        binding: 1,
        visibility: GPUShaderStage.COMPUTE,
        buffer: {
          type: "read-only-storage"
        }
    },{
      binding: 2,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage"
      }
    }]
  });

  const bindGroup = device.createBindGroup({
    layout: bindGroupLayout,
    entries: [{
        binding: 0,
        resource: {
          buffer: input1,
        }
      },{
        binding: 1,
        resource: {
          buffer: input2,
        }
      },{
      binding: 2,
      resource: {
        buffer: output,
      }
    }]
  });

  const computePipeline = device.createComputePipeline({
    layout: device.createPipelineLayout({
      bindGroupLayouts: [bindGroupLayout]
    }),
    compute: {
      module: shaderModule,
      entryPoint: 'main'
    }
  });

  // 5: Create GPUCommandEncoder to issue commands to the GPU
  const commandEncoder = device.createCommandEncoder();

  // 6: Initiate render pass
  const passEncoder = commandEncoder.beginComputePass();

  // 7: Issue commands
  passEncoder.setPipeline(computePipeline);
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.dispatchWorkgroups(Math.ceil(BUFFER_SIZE / 64));

  // End the render pass
  passEncoder.end();

  // Copy output buffer to staging buffer
  commandEncoder.copyBufferToBuffer(
    output,
    0, // Source offset
    stagingBuffer,
    0, // Destination offset
    BUFFER_SIZE
  );

  // 8: End frame by passing array of command buffers to command queue for execution
  device.queue.submit([commandEncoder.finish()]);

  // map staging buffer to read results back to JS
  await stagingBuffer.mapAsync(
    GPUMapMode.READ,
    0, // Offset
    BUFFER_SIZE // Length
  );

  const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER_SIZE);
  const data = copyArrayBuffer.slice();
  stagingBuffer.unmap();
  console.log(new Float32Array(data));
}

init().catch((e)=>{
    alert(e)
});

HTML is standard boiler plate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGPU Matrix Addition</title>
</head>
<body>
    <script type="module" src="./matrix_addition.js"></script>
</body>
</html>

Open Chrome developer tools to see the output

How to setup .NET Core Blazor Server with Tailwind CSS

Gavi Narra — Fri, 15 Apr 2022 00:28:00 +0000

mkdir TailwindDotNet
cd TailwindDotNet
dotnet new blazorserver
npm init -y
npm install -D tailwindcss autoprefixer postcss
npx tailwind init -p

Edit package.json and add a run script for CSS generation

"scripts": {
    "css:build": "npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css"
  },

Delete bootstrap stuff

You site.css should include only the following lines

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

Add the following lines in tailwind.config.js

'./Pages/**/*.cshtml',
'./Pages/**/*.razor',
'./Views/**/*.chstml',
'./Views/**/*.razor',
'./Shared/**/*.razor',

Modify your .csproj to include a css build step

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
  <ItemGroup>
        <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />
        <UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />
        <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
    </ItemGroup>

    <Target Name="Tailwind" BeforeTargets="Build">
        <Exec Command="npm run css:build"/>
    </Target>

</Project>

Modify _Layout.cshtml to reference output.css instead of site.css and remove any bootstrap references

    <link href="css/output.css" rel="stylesheet" />

So now when you compile and run, it will build the output.css

Working with dotnet watch

Just run in a terminal window

npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css --watch

Then run dotnet watch

dotnet watch run