Originally posted on: https://writings.niharika.me/how-to-improve-youtube-with-llms

Last update: Wednesday, September 13, 2023

The way humans interact with technology has come a long way. In the early days of computing, users had to input commands using punch cards. At this point, if you have to pause and consciously think about “punch cards,” then I proved my point quite effectively;

Humans have indeed come a long long way in how we interact and navigate the digital world.

The story of the metaverse is shaping up rapidly becoming increasingly natural and intuitive. We are leveraging touch, voice, gestures, and probably direct brain connections in the near future.

Lightning-fast advances in Natural Language Processing (NLP) have enabled us to engineer even better user experiences. Just when you think there is probably no more room left for optimization, there is. NLP effectively makes machines understand and generate human language. This creates a significant impact on how we communicate with technology.

🎯 The purpose of this blog is to explore how YouTube can be improved by capitalizing on the latest groundbreaking advancements in LLMs and to create a video summarizer using Whisper from OpenAI and BART from Meta.

How would I improve YouTube

As a product manager, it is key for me to identify challenge areas in a product and strategically devise solutions that not only address these issues but also align with the larger product vision and goals. The product in question here is YouTube.

User groups

I don’t think I need to define what YouTube is. So I can skip this part and get to defining the key user segments of YouTube. Broadly speaking, they fall into two categories:

1. Creators
2. Consumers

For the purpose of this blog, I will focus on the consumers. Without consumers, creators lose their value. Therefore, it is key to enhance the consumer’s experience at every step of the way.

Potential pain points / challenges

• Misleading thumbnails and titles: Clickbaits. Extremely frustrating for viewers seeking relevant content.
• Inappropriate content: Despite YouTube’s content moderation efforts, viewers may come across content containing offensive, harmful, or inappropriate content.
• Content duplication: What is more annoying than different creators uploading the same video repeatedly cluttering the search results and making it difficult to find the original video.
• Limited content discovery: If YouTube’s recommendation algorithm doesn’t align with the viewer’s interest, it can be very difficult to discover new and relevant content.
• Limited content accessibility: Imagine not being able to understand a video just because you don’t know the language it is in. Most of the content by top channels on YouTube is in English.

Ideas that may help improve UX of consumers

• Natural language interaction with the video: Viewers can read the text summary of the video before jumping into watching a video. Let’s say the video is a 50-minute-long panel discussion. This improvement will also save a lot of time of the viewer, helping them make a more informed choice about the content they will consume. The user can also ask questions and get answers in text without necessarily watching the video.
• Detect and flag inappropriate + duplicate content
• Enhanced recommendation algorithms
• Multilingual support and accessibility: Viewers can view the video in any language they like in the same voice as the narrator. This will enhance the reach of every video bringing down the language barriers.

Time to create a video summarizer

Personally, for me clickbaits are annoying and sometimes before committing to watching a long video, I’d like to judge the video based on a text summary. At the moment, I rely on comments on the videos. However, there are instances when there are not many helpful comments or maybe commenting had been turned off.

I will address this painpoint by leveraging LLMs that will generate a text summary of any YouTube video I give as an input.

In a nutshell…

Web interface

The user will enter the link to the YouTube video and click on ‘Summarize Video’ button.

Let me enter this YouTube video and see what comes out.

https://www.youtube.com/watch?v=SHw5iZ0tI48

Here’s the output:

Summary:

“The original iPod was a pioneer in terms of the simple design and easy-to-use functionality. Apple credited the idea of the iPod to an obscure man by the name of Ken Kramer. The rise of the MP3 file format caused a lot of commotion in the music industry.”

Quite good, no?

Here’s the python script I’m using to do this magic:

import pytube
import requests
import os
from dotenv import find_dotenv, load_dotenv
import openai
import streamlit as st

st.title('YouTube Video Summarization')

load_dotenv(find_dotenv())
openai.api_key = os.getenv("OPENAI_API_KEY")
HUGGINGFACEHUB_API_TOKEN=os.getenv("HUGGINGFACE_API_TOKEN")

# Extract audio from YouTube
def get_audio(video_url):
    # Create a PyTube object for the video.
    youtube_video = pytube.YouTube(video_url)
    # Get the audio stream from the video.
    audio_stream = youtube_video.streams.filter(only_audio=True)
    # Get title
    st.write("Now summarizing: ", youtube_video.streams[0].title)
    # Download the audio stream to a file.
    audio_stream[0].download(output_path="audios", filename="audio.mp3")

# Audio to text
def get_text(filename):
    audio_file= open(filename, "rb")
    transcript = openai.Audio.transcribe("whisper-1", audio_file)
    return transcript

# Summarize
def summarize(transcript):
    API_URL = "https://api-inference.huggingface.co/models/facebook/bart-large-cnn"
    headers = {"Authorization": f"Bearer {HUGGINGFACEHUB_API_TOKEN}"}
    payload = {
        "inputs": transcript
    }
    response = requests.post(API_URL, headers=headers, json=payload)
    return response.json()

youtube_link = st.text_input('YouTube Video:', 'Enter URL here')
def process_input(youtube_link):
    get_audio(youtube_link)
    video_text = get_text("audios/audio.mp3")
    video_text = video_text.text
    summary = summarize(video_text)
    return summary[0]

# Create a button to trigger the function
if st.button("Summarize Video"):
    result = process_input(youtube_link)
    st.write("Summary", result)

Circling back

Injecting LLMs into YouTube to enhance the UX and revolutionize the way we engage with videos on literally any platform is beyond awesome.

By providing video summaries, improving search and discovery, and enhancing accessibility and convenience, YouTube can become an even more user-friendly and informative platform.

As a product manager, I believe that exploring these possibilities and addressing the challenges will lead to a more enriched YouTube experience for everyone. It’s time to harness the power of LLMs and take YouTube to the next level of user satisfaction and engagement.

Part 1 of the series outlines the potential applications of blockchain in corporate governance and walks through how to set up your project to follow this series. Part 2 outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.

In Part 3, we started weaving in the UI and learned how to read from the blockchain. In Part 4, we added voting functionality for both the candidates and learned how to write to the blockchain.

This part is going to be the final part of this series. Until now, we were simply logging the results on the developer console. In this blog, we will learn how to display the voting results on the UI.

We will display the results in the form of a table which will look something like this:

We will achieve this in three simple steps:

1. Create a hidden `<action-button>` that will be fired each time a user votes.
2. Create a placeholder table to display the results similar to the above drawn table.
3. Modify the `showResults()` function to display the table on the UI.

Let’s get started!

Step 1: Create a hidden `<action-button>`

This `<action-button>` will be `hidden` so that the user (voter) can’t see the current results of the vote before actually casting their vote.

Create this `<action-button>` in `dapp-page.js` within `render()` function. This button will be wrapped within a `div` with a unique ID. This `div` should also be `hidden`.

In the above code snippet, you can see that the `hidden` property of the `<action-button>` is set to `true`. This `<action-button>` also has a unique ID `get-candidates`. We set ID to `get-candidates` because this `<action-button>` is essentially fetching all data relevant to the candidates. The most important property of this `<action-button>` is the `.click` property. When this hidden`<action-button>` is clicked, `getCandidates()` method is called. We will take care of clicking this button by manipulating the DOM. This button will be clicked and `getCandidates()` method will be fired as soon as the user (voter) castes their vote.

Let’s create the `getCandidates()` method within `dapp-page.js`. This function should be near other custom made functions like `showResults()`.

The function `getCandidates()` fetches data from the blockchain by invoking the smart contract. The received result is then presented in the form of the table with a unique ID `candidate-lookup`. This table will be created in Step 2.

Step 2: Create a placeholder table

We need to create a placeholder table so that we can populate it dynamically. You can style it in anyway you like. We will use Tailwind CSS.

We will add this placeholder table within the `div` we created in Step 1 with ID `tally`.

Now, we are all set to display the results. The data to be populated is ready to be loaded, and the placeholder is ready to be filled. All we need to do is display the `div` with ID `tally`. We need to take care that the `hidden` `<action-button>` is clicked before the `div` is loaded.

Step 3: Modify the `showResults()` function

Until now we were just logging the result in the developer console. Now, let’s manipulate the DOM and display the result in the form of a table.

In the `showResults()` function in `dapp-page.js`, make the following changes:

We are accessing the DOM by capturing the element by ID `(elid)`. First, we are clicking on the `hidden` `<action-button>` to fire the `getCandidates()` function and then we are removing the `hidden` class from `div` with ID `tally` to make it visible in the DOM.

And this was all!

Your dapp should now successfully display the current vote tally.

This was the final feature we wanted to add to this voting dapp.

If you have been following this series and made it till here, congratulations! 🎉

We hope you learned how to make an end-to-end full-stack voting dapp on the Ethereum blockchain. We will be coming up with more series with interesting use cases to build on the blockchain.

Stay tuned.

Build with DappStarter.

Get Best Software Deals Directly In Your Inbox

How To Display Voting Results from Blockchain On UI was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article is a part of a series called Corporate Governance on Blockchain.

Part 1 of the series outlines the potential applications of blockchain in corporate governance and walks through how to set up your project to follow this series.

Part 2 outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.

In Part 3, we started weaving in the UI and learned how to read from the blockchain.

In this part, we will add voting functionality for both the candidates and learn how to write to the blockchain.

By the end of Part 3, our dapp was looking like this:

In this part, we will follow 3 steps to facilitate voting in our dapp.

1. Create a voting function in our library, dapp-lib.js. This function will be responsible for writing the votes to the blockchain. (Note: writing to the blockchain is analogous to calling a HTTP POST method and is not free.)
2. Add an action button for both the candidates and wire the buttons with the voting function we wrote in step #1 in dapp-lib.js.
3. Finally, let’s verify if our voting logic is working correctly. We will call the getCandidates() function again. The voteCount for both the candidates should now be different.

Step 1: Create a voting function in our library, dapp-lib.js

DappStarter has already generated dapp-lib.js for this purpose. You can find it with this path:

packages
  - dapplib
    - src
      - lib
        -> dapp-lib.js

As a good practice, I would suggest you write this function near the getCandidates() function to make it easier to track which functions you’ve added to the dapp-lib.js file.

The format of this function will remain similar for all functions that intend to write to the blockchain.

This function will take data as an input parameter. This input object will be received from <action-button> which we will create in the next step in dapp-page.js. Within this data object, there will be a property called candidateId which will also be received from <action-button>.

Under the hood, dapp-page.js communicates with blockchain.js internally to write to the blockchain. So from dapp-page.js, all we have to do is call the Blockchain.post() method.

Our work in dapp-lib.js is now done. Let’s move onto dapp-page.js to add action buttons to the UI.

Step 2: Add an action button and wire them to the voting logic

<action-button> is a custom element that provides an interface to communicate with dapp-lib.js to access functions of our smart contract.

An <action-button> needs the following tags:

• Source: This should point to the source div from where data is to be extracted
• Action: This is the name of the function as we wrote in dapp-lib.js
• Method: GET/POST
• Fields: Properties under the data object that will be an input to function in dapp-lib.js
• Text: This is the text on the button visible to the user
• Class: CSS class of the button
• .Click: Function to call when this button is clicked.

First, let’s add an action button for our first candidate, Miss Kitty. Navigate to render() function in dapp-page.js.

In the above code snippet, we created a hidden <input> with pre-populated value of 0 because candidateId for Miss Kitty is 0. The data-field is set to candidateId because <action-button> will get its data from candidateId. Note that this is wrapped in a div named kitty-form.

Let’s create the showResults() function. This function will be called whenever <action-button> is clicked. We will create this function in the beginning of dapp-page.js, near constructor(args).

The name of this function will be showResults(). We will call getCandidates() function in dapp-lib.js and display the results. We will modify this function in later parts when we will present the result in the UI.

Similarly, we will write an <action-button> for Mr Doggo. Note that value of data-field is 1, and the name of the source div is doggo-form.

After successfully making these changes, your dapp should look like this:

Step 3: Verify that our voting logic is working correctly

We are almost done. Now we just have to verify that it’s working properly.

To check if everything is working as expected, click on the buttons in the UI. You can click on them multiple times. ;)

In the developer’s console, you should see something like this. We see a clean table instead of a nested JSON because we did not do console.log() but instead, console.table().

The terminal should also reflect the transaction occurring on the blockchain. You will be able to see the transaction id, gas usage, block number, and block time. It should look like this:

In this article, we’ve learned how to add voting functionality for our candidates. As mentioned in Part 1, instead of voting for candidates, you can also choose to vote on agendas. You can customize your dapp in whichever way you like. We also learned how to write to the blockchain. We learned how to work with <action-button>. These custom elements are one of the key magic features of DappStarter.

We are very close to finishing this dapp. In the next article, we will see how we can display results directly in the UI to make it easy for users to see the current tally for each candidate.

Get Best Software Deals Directly In Your Inbox

Start building with DappStarter.

Stay tuned.

Add voting functionality was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article is a part of a series called Corporate Governance on Blockchain.

Read this to learn how blockchain could change corporate governance for the better. Here, you will also find how to set up your project to follow this article series.

In Part 1 of the series outlines the potential applications of blockchain in corporate governance and walks through how to set up your project to follow this series. Part 2 outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.

In this article, we will learn how to wire up a UI to the smart contract created in part 2 of this series.

Step 1: Expose all smart contract functions as a library

On exposing smart contract functions as a library, it becomes very easy to manage the arguments (parameters) and results. This is one of the key steps in connecting the blockchain with our UI.

DappStarter has already generated dapp-lib.js for this purpose. You can find it using:

packages
  - dapplib
    - src
      - lib
        -> dapp-lib.js

In this file, you can see that all functions that are available in the contracts.

Let’s create our very own function within dapp-lib.js. You can write them anywhere in the file. I will write them under Examples section.

Dapp-lib.js abstracts all the complex communication with the blockchain. So you, as a developer, don’t need to set up Web3 library for your project from scratch. All the code responsible for managing blockchain (inputs and outputs) can be found in blockchain.js. DappStarter is designed in a way that you wouldn’t really need to tweak blockchain.js. Dapp-Lib.js does that for you.

It’s as simple as that.

Let’s test out the getCandidates() function we just created in Dapp-lib.js. To do so, let’s call getCandidates() function from constructor() function in dapp-page.js and print the result.

This returns a resolved promise. This promise contains all the required data — name and voteCount.

This verifies that our function getCandidates is working properly.

Step 2: Get icons for candidates

Thanks to Alfrey Davilla for creating such cute icons. :)

Our two candidates are Ms. Kitty and Mr. Doggo :

• You can download the picture of the cat from here.
• You can download the picture of the dog from here.

As a good practice you should save static assets in:

packages
  - client
    - src
      - dapp
        - assets
          - img
            -> kitty.png
            -> doggo.png

Step 3: Import icons

Now let’s import these images in dapp-page.js. You can find dapp-page.js in:

packages
  - client
    - src
      - dapp
        - pages
          -> dapp-page.js

In the beginning of the file, you can add the code:

Step 4: Set up CSS structure to make a placeholder for candidates

DappStarter uses Tailwind CSS. You can even add your own components in dapp-page.js under render() function.

https://gist.github.com/niharrs/11214ec335a500830361d1150d490979#file-dapp-page-js

Your dapp should look like this now-

In this article, we’ve learned how to expose our functions as a library in dapp-lib.js to communicate with the blockchain. We also learned how to read data from the blockchain and how the basic UI works in DappStarter.

Our dapp is coming together well now. In the next article, we will add voting logic so shareholders can cast their vote to be written to the blockchain. We will also explore how DappStarter manages UI in more depth.

Start building with DappStarter.

Stay tuned for part 4!

Part 3: How can we connect our smart contract to a UI was originally published in TryCrypto (now Decentology) on Medium, where people are continuing the conversation by highlighting and responding to this story.

Part 1 of the series outlines the potential applications of blockchain in corporate governance. It also provides an overview of the technical architecture of the shareholder voting solution to be implemented in this series and walks through how to set up your project to follow this series. Read part 1 here.

In this article, we will write a shareholder voting smart contract using Solidity.

Here is the overview of the idea we want to capture in the smart contract. We will write a function to:

• Add candidates
• Get candidates
• Cast a vote

We will assume that each ‘Annual General Meeting (AGM)’, the annual meeting where shareholders vote on agendas to make key decisions for the company, will be different, so a different smart contract would be developed for each one.

Assuming that you’ve set up your project. You can find Dapp.sol

packages
  - dapplib
    - contracts
      -> Dapp.sol

Let’s start by defining what our candidate will look like. For sake of simplicity, let’s assume it will have an id, name and, voteCount.

Now, let’s define the addCandidate function. This function's job is to create a candidate listing on the blockchain. Instead of a candidate, you can also vote on agendas. The choice is yours.

The initial voteCount for each candidate will be zero.

We want to invoke the addCandidate function as soon as the smart contract is deployed, so we will call it from the Constructor() function.

The next step would be to fetch all candidates. There are two approaches you could choose from:

1. Fetch candidates by ID: This means that if there are 50 candidates, each user will have to query the smart contracts 50 times. Let’s say there are 20,000 voters, this means that your smart contract will be invoked 20,000 * 50 times (1,000,000 times). I don’t think this is wise, you’d end up wasting a lot of bandwidth. Nonetheless, I’ll still show you what this code might look like.

2. Fetch all candidates at once. You will return ALL candidates at once. This means your smart contract will be invoked 20,000 times (# of users) instead of a million times. This is the approach we will go with.

Here we are returning an array of names and an array of voteCounts. We can manipulate these arrays later using JavaScript to fit our needs.

Note 1: Since getCandidates() is NOT called from within the smart contract but will be called from the outside, we will use external keyword here.

Note 2: getCandidates() is a read only function. Reading from the blockchain is free. So we use the keyword view here.

Finally we need to add voting logic in our smart contract. Let’s call this function vote. Since this function will be called from outside of the smart contract, we will use external keyword here. We will NOT use view keyword because this function writes your vote to the blockchain and writing to the blockchain is not free.

At the end, your smart contract should look like this-

In this article, we explored the various approaches to writing a resource-efficient smart contract. We also covered the important keywords (external, view) to understand and use properly when developing a smart contract. In part 3, we’ll outline how to connect your smart contract to a UI to make it simple for shareholders to interact with the smart contract functions we’ve written here.

Start building with DappStarter.

How To Implement A Voting Smart Contract was originally published in TryCrypto (now Decentology) on Medium, where people are continuing the conversation by highlighting and responding to this story.

The passion economy is all about monetizing individuality. Successful people usually have a unique skill set that is uncommon and hard to find elsewhere. When you combine your passion with skills, you can carve out a perfect niche in the economy.

The nature of work as we see it today is changing rapidly. Post COVID-19 crisis, we don’t know if we can go back to the way we were. Who thought they would be writing their end semester exams from their dorm!? Do we really need brick and mortar to run an office? COVID-19 is making us challenge the status quo.

The beginning of the journey into the passion economy starts with you. (This is usually the hardest step.) The passion economy is all about monetizing your individuality, so step #1 is reflecting within to find what you’re truly passionate about. This idea resonates with many religions where the focus is on finding a greater purpose in life and to work towards it with raw passion.

And passion pays off. According to a16z, the top-earning writer on the paid newsletter platform Substack earns more than $500,000 a year from reader subscriptions. The top content creator on Podia, a platform for video courses and digital memberships, makes more than $100,000 a month. And teachers across the US are bringing in thousands of dollars a month teaching live, virtual classes on Outschool and Juni Learning.

Yet, so many platforms lack transparency for content creators. In this blog post, we will focus on leveraging blockchain to create a passion economy platform for writers.

Here’s a step-by-step guide on how to develop a journal entry prototype on the Ethereum blockchain using Sia as a decentralized storage platform.

We will build a platform where a user can make a journal entry and push it to a decentralized storage platform. The unique hash of the journal entry will be stored on the blockchain. We will also fetch previous journal entries.

Sia is an open source decentralized storage platform that leverages blockchain technology to create a data storage marketplace. It is more robust and affordable when compared to traditional cloud storage providers. You don’t require any signups, servers, or need to trust third parties. Sia keeps your data private. You control your private encryption keys and you own your data. No third party has access to your files, unlike traditional cloud storage providers. Learn more about Sia here.

DappStarter is a full-stack blockchain app generator. We’ll be using DappStarter to spin up a minimalistic blockchain dapp within 5 minutes. DappStarter makes development faster and more efficient so developers can focus on the smart contract’s business logic, saving weeks of learning and development time. Learn more about DappStarter here.

Checklist before starting:

• Visual Studio Code (or any IDE for editing JavaScript)
• NodeJS v10.x
• Solidity v0.5.11
• Truffle v5.0.7
• Ganache v2.0.0 — Blockchain simulator for Ethereum

Step 1: Go to dappstarter.trycrypto.com to generate your blockchain dapp

DappStarter supports your choice of blockchain and blockchain language as well as an integrated front end user experience in your choice of client side framework.

Step 1.1: Select your choice of blockchain. For this tutorial, we will use Ethereum.

Step 1.2: Select Solidity as smart contract language

Step 1.3: For now we will work with vanilla JS

Step 1.4: Select a name for your dapp and click on the ‘CREATE DAPP’ button! 🎉

If you have followed all these steps successfully, you should have a unique github repository link where you can find your dapp!

Step 2: Go to the GitHub repository and start your dapp using README

Once you have successfully started your dapp, you should see something like this-

To get an overview of DappStarter, go to trycrypto.com/.

Step 3: Customize your dapp

Let’s see how we can modify the navigation pane. Go to src/dapp/pages/components/page-navigation.js

You can find all the code related to dapp navigation here.

…

getPages() {

let staticPages = [{

name: ‘dapp’,

title: ‘Start Writing!’,

route: ‘/’

}, {

name: ‘admin’,

title: ‘Dapp Admin’,

route: ‘/admin’,

hidden: true

}]

return staticPages.concat([{“name”:”administrator_role”,”title”:”Administrator Role”,”description”:”Define accounts that can perform certain admin functions.”,”category”:”Access Control”,”route”:”/administrator_role”},{“name”:”contract_access”,”title”:”Contract Access”,”description”:”Control which external contracts can interact with your contract.”,”category”:”Access Control”,”route”:”/contract_access”},{“name”:”contract_runstate”,”title”:”Contract Run State”,”description”:”Ability to pause operation of your smart contract.”,”category”:”Access Control”,”route”:”/contract_runstate”}]);

…

On saving the file, the dapp will be reloaded automatically because DappStarter uses webpack. Now, you should see a navigation panel and Start Writing page like this-

Step 4: Create a new widget to make our dapp modular

It’s good practice to create widgets for different functionalities. Create a file named html-widget.js in src/lib/components/widgets.

Insert the following code in this file

import CustomElement from ‘../shared/custom-element’;

export default class HtmlWidget extends CustomElement {

static get ATTRIBUTE_FIELD() {

return ‘field’

}

static get ATTRIBUTE_LABEL() {

return ‘label’

}

static get ATTRIBUTE_PLACEHOLDER() {

return ‘placeholder’

}

static get observedAttributes() {

return HtmlWidget.attributes;

}

static get attributes() {

return [

HtmlWidget.ATTRIBUTE_FIELD,

HtmlWidget.ATTRIBUTE_LABEL,

HtmlWidget.ATTRIBUTE_PLACEHOLDER

];

}

constructor(…args) {

super(HtmlWidget.attributes, …args);

this.quill = null;

}

get value() {

let markup = this.quill.container.querySelector(‘.ql-editor’).innerHTML;

return `<html>

<head> </head>

<body>

<div style=”font-family:lato;”>

${markup}

</div>

</body>

</html>`

}

render() {

let self = this;

let content = `

<div class=”input-group”>

<div id = “editor” class = “form-control”> </div>

</div>

`

self.style.display = ‘block’;

if (self.nextSibling) {

self.classList.add(‘mb-3’)

}

self.innerHTML = content;

var toolbarOptions = [

[‘bold’, ‘italic’, ‘underline’, ‘strike’], // toggled buttons

[‘blockquote’, ‘code-block’],

[{ ‘header’: 1 }, { ‘header’: 2 }], // custom button values

[{ ‘list’: ‘ordered’}, { ‘list’: ‘bullet’ }],

[{ ‘script’: ‘sub’}, { ‘script’: ‘super’ }], // superscript/subscript

// [{ ‘indent’: ‘-1’}, { ‘indent’: ‘+1’ }], // outdent/indent

// [{ ‘direction’: ‘rtl’ }], // text direction

// [{ ‘size’: [‘small’, false, ‘large’, ‘huge’] }], // custom dropdown

[{ ‘header’: [1, 2, 3, 4, 5, 6, false] }],

[{ ‘color’: [] }, { ‘background’: [] }], // dropdown with defaults from theme

// [{ ‘font’: [] }],

// [{ ‘align’: [] }],

[‘clean’] // remove formatting button

];

self.quill = new Quill(‘#editor’, {

modules: {

toolbar: toolbarOptions

},

theme: ‘snow’

});

}

}

customElements.define(‘html-widget’, HtmlWidget);

In this file, we have integrated Quill to make rich text journal entries. Quill is a free, open source WYSIWYG editor built for the modern web.

To use Quill’s functionalities, make sure you add Quill CDNs in dapp/index.html. In the head, add <link href=”https://cdn.quilljs.com/1.3.6/quill.snow.css" rel=”stylesheet”> and just before closing body, add <script src=”https://cdn.quilljs.com/1.3.6/quill.js"></script>

To increase length of the text editor, make the following changes to src/dapp/index.css-

…

#editor {

height: 375px;

}

strong { font-weight: bold !important; }

…

Step 5: Make use of html-widget in our dapp

Go to src/dapp/pages/dapp-page.js (this is where all our dapp front-end logic will reside) and make the following changes. Import the created html-widget there. We will be able to use this widget like a regular html tag to use Quill editor anywhere in our dapp.

import DappLib from ‘../../lib/dapp-lib’;

import CustomElement from ‘../../lib/components/shared/custom-element’;

import DOM from ‘../../lib/components/shared/dom’;

import ‘../../lib/components/shared/action-card.js’;

import ‘../../lib/components/widgets/number-widget.js’;

import ‘../../lib/components/widgets/html-widget.js’;

import ActionButton from ‘../../lib/components/shared/action-button’;

import canvas from ‘../assets/img/canvas.jpg’;

export default class SiaPage extends CustomElement {

constructor(…args) {

super([], …args);

this.mode = ‘multiple’;

this.files = [];

this.eventHandlerRegistered = false;

}

render() {

let self = this;

self.category = “Maintain your journal on decentralized web”;

self.description = “Store your journal on decentralized file storage”;

let uiHtml = {

[CustomElement.UI_READ]: ‘’,

[CustomElement.UI_WRITE]: ‘’,

[CustomElement.UI_ADMIN]: ‘’

}

uiHtml[CustomElement.UI_READ] =

`

<action-card

title=”Get Document” description=”Get Sia document using its ID”

action=”getSiaDocument” method=”${CustomElement.METHOD_GET}” fields=”id”>

<number-widget

field=”id” label=”Doc ID” placeholder=”Document ID”>

</number-widget>

</action-card>

<action-card

title=”Get Documents by Owner” description=”Get all Sia documents for any account”

action=”getSiaDocumentsByOwner” method=”${CustomElement.METHOD_GET}” fields=”account”>

<account-widget

field=”account” label=”Account” placeholder=”Account address”>

</account-widget>

</action-card>

`

uiHtml[CustomElement.UI_WRITE] =

`

<action-card

title=”Make a journal entry” description=”Upload entry to Sia and add hash to contract”

action=”addSiaDocument” method=”${CustomElement.METHOD_POST}” fields=”myText”

target=”card-body-addSiaDocument”

message=”Waiting for Sia upload and smart contract transaction”>

<h2> Start Writing! </h2>

<html-widget

data-field= “myText” field=”label” label=”Label”

placeholder=”Description”>

</html-widget>

<input type=”hidden” data-field=”mode” value=”${self.mode}” style=”display:none;”></input>

</action-card>

`

let content =

`

<page-body title=”${self.title}” category=”${self.category}” description=”${self.description}”>

${uiHtml[CustomElement.UI_READ]}

${uiHtml[CustomElement.UI_WRITE]}

${uiHtml[CustomElement.UI_ADMIN]}

</page-body>

<page-panel id=”resultPanel”></page-panel>

`

self.innerHTML = content;

// self.querySelector(‘upload-widget’).addEventListener(UploadWidget.EVENT_FILES_CHANGED, (e) => {

// //Could do something here

// //let files = e.detail.files;

// });

if (!self.eventHandlerRegistered) {

self.eventHandlerRegistered = true;

DappLib.onAddSiaDocument((result) => {

let resultPanel = self.querySelector(‘#resultPanel’);

resultPanel.append(DappLib.getFormattedResultNode(result));

resultPanel.open();

});

}

}

async fetchAndDisplayCounter() {

let result = await DappLib[‘getStateCounter’].call();

DOM.elid(‘counter’).innerHTML = result.callData;

}

}

customElements.define(‘dapp-page’, DappPage);

Your dapp should look like this now-

Step 6: Remove extra blocks and change logo

Let’s take the customization of the dapp to the next level. Let’s make it look like this-

Let’s change the logo first. You can use any image. Save it in src/dapp/assets/img. Let’s name it YOUR_FILE_NAME.png. Now go to src/dapp/pages/components/page-navigation.js. You see this line in the code-

import logo from “../../../dapp/assets/img/dappstarter.png”;

Change it to

import logo from “../../../dapp/assets/img/YOUR_FILE_NAME.png”;

We also need to make a change to webpack.config.dapp.js (this is in the root of the project)-

…

plugins: [

new HtmlWebpackPlugin({

template: path.join(__dirname, ‘src/dapp/index.html’)

}),

new FaviconsWebpackPlugin(‘src/dapp/assets/img/YOUR_FILE_NAME.png’)

],

…

This is what your dapp should look like now-

Now let’s remove the Feature blocks from the left navigation panel. Go to src/dapp/pages/components/page-navigation.js.

…

// Remove the block between //BEGIN //END below to remove feature blocks from navigation

// BEGIN: Feature Blocks

// DOM.h4({

// className: ‘mt-5 mb-2’

// },

// “Feature Blocks”),

// DOM.ul({

// id: self.listId + ‘-blocks’,

// className: ‘list-group list-group-flush’

// },

// listItems.slice(1)

// ),

// END: Feature Blocks

…

Your dapp should look like this now-

We are almost there!! Finally, let’s get rid of the top navigation bar. Go to src/dapp/pages/components/top-navigation.js and remove all the html that is being rendered.

src/dapp/pages/components/top-navigation.js should look like this-

import CustomElement from ‘../../../lib/components/shared/custom-element’;

export default class TopNavigation extends CustomElement {

static get ATTRIBUTE_COLLAPSE() {

return ‘collapse’

}

static get observedAttributes() {

return TopNavigation.attributes;

}

static get attributes() {

return [

TopNavigation.ATTRIBUTE_COLLAPSE

];

}

constructor(…args) {

super(TopNavigation.attributes, …args);

}

}

customElements.define(‘top-navigation’, TopNavigation);

This is what your dapp should look like now-

Step 7: Handle journal entry with Sia

All the code related to Sia document upload rests in src/lib/dapp-lib.js. Go to FILE STORAGE: SIA section. The only code block that needs editing here is addSiaDocument().

static async addSiaDocument(data) {

let folder = data.mode === ‘folder’;

let config = DappLib.getConfig();

//Name of the journal entry is the date and time when it was written

const timeStamp = new Date().toString();

// Convert data received from html-widget into a file

data.files = [new File([data.myText], `${timeStamp}.html`, {

type: “text/html”,

})];

// Push files to SIA

let siaResult = await DappLib.siaUpload(config, data.files, folder);

let results = [];

for(let f=0; f<siaResult.length; f++) {

let file = siaResult[f];

let result = await Blockchain.post({

config: config,

contract: DappLib.DAPP_STATE_CONTRACT,

params: {

from: null,

gas: 2000000

}

},

‘addSiaDocument’,

file.docId,

DappLib.fromAscii(data.label || ‘’, 32)

);

results.push({

transactionHash: DappLib.getTransactionHash(result.callData),

docId: file.docId

});

}

Step 8: Final touch ups

Our dapp is almost ready. We just need to make a few tweeks in src/dapp/index.css. Add the following lines to the file-

.markup {

font-family:courier;

}

These were all the changes we had to make! Now let’s see our dapp in action.

Congratulations, if you made it till here! 🎉

You can modify your dapp to develop more sophisticated platforms for writers. What we built was merely an example of one of the many use cases you as a developer could build upon.

The future of the passion economy is predicated on the concept of transparency and fairness for content creators. Blockchain provides a unique infrastructure that encourages creators to make awesome content by ensuring that they’ll be fairly compensated for their efforts. Building a dapp for the passion economy is about more than just monetizing content — it’s about providing a transparent, open system where creators feel empowered to create and share what makes them unique.

Start building your dapp with DappStarter.

Get Best Software Deals Directly In Your Inbox

Learn How to Create a Passion Economy Platform on Blockchain was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

There’s lots of talk in the blockchain space about how blockchain can be used to facilitate voting in the political sphere, but there is less talk on the very real and very impactful use case of voting in the realm of corporate governance.

Shareholder franchise, the concept that shareholders have a right to participate in corporate decision-making, is at the core of corporate governance. Every year, shareholders are summoned to vote on important corporate agendas like election of new board of directors, modification of bylaws, approval of mergers, etc.

Shareholder voting is expensive and error-prone

Imagine you are one of the many shareholders of a hypothetical company Crypto Inc. Crypto Inc. has decided to appoint a new member to its board of directors. You have been invited to cast your vote in this regard. Unfortunately, you can’t make it to the shareholder meeting. So you decide to mail them your response.

It’s highly probable that many other shareholders also would also not be able to attend the shareholder meeting in person. So most likely, even they would send out their vote in the mail or send their delegate to the meeting as a proxy.

But you wonder: Did Crypto Inc. count your vote? What if they misplaced your mail by mistake or purposefully? If your response was kept confidential or not?

For Crypto Inc. as well, hosting shareholder meetings is a cumbersome process. They are expensive, slow, and prone to errors.

Let’s look at real life examples illustrating problems with the current system…

Many intermediaries get involved as a company tries to put an agenda on vote. For example; brokers, banks, proxy service providers, proxy advisory firms, vote tabulators etc. Any error at any level would get compounded as information travels from one participant to another. At the moment, each participant is seen as a hindrance to efficiency, but the same protocol has to be followed because there is no other option.

In 2017, at Procter & Gamble (P&G), Nelon Peltz wanted to compete for a seat on the company’s board. When the results came out, he lost. P&G claimed victory by 6 million votes out of 2 billion votes. Peltz challenged the outcome, and demanded a recount. A different vote tabulator was appointed and recounting was done. After recounting, Peltz turned out to be the victor by a margin of 42,780 votes.

In February 2008, Microsoft made an offer to buy Yahoo! for $31 per share. The board of directors at Yahoo! declined the offer. Soon after, Yahoo! announced that it received approval for a slate of directors from 80% shareholders. This actually never happened. Broadridge, a proxy service firm, misreported 20% of votes because it didn’t include millions of voters in the final tally.

The current system gives 3rd parties significant power with little transparency, leaving room for serious errors. ENTER blockchain!

Voting on blockchain will by design make the environment auditable without requiring 3rd parties.

In a blockchain-based corporate governance system:

• All ecosystem participants can audit the votes by querying the blockchain at their convenience.
• Shareholders can safely exercise their right to vote without worrying if their vote is counted or not, or if their response was kept confidential or not.
• Such a voting system has the potential to eliminate the complexity and cost of the legacy proxy voting value chain by eradicating/reducing the role of intermediaries.
• Companies would be able to propose voting agendas more frequently at a lower cost. The outcome of the agenda would be much faster and more accurate.

These factors could improve overall confidence in the ecosystem, which can fuel more effective and transparent corporate governance.

A blockchain-enabled shareholder voting system might look something like this in your local development environment.

Specific individuals at Crypto Inc. can create new agenda items. Once the agenda is on the floor, the shareholders can vote from the dapp’s UI. Each vote is committed to the blockchain via a smart contract, so the ecosystem remains transparent and auditable.

Want to build a dapp like the example above? Starting from scratch is time-consuming and frustrating. Generate a custom dapp with DappStarter, then tailor to fit your needs. DappStarter accelerates blockchain development so that you can focus on your smart contract’s business logic, saving weeks of learning and development time. You can see DappStarter in action here.

You can create your own dapp using DappStarter in three simple steps:

Step 1 : Choose your blockchain

At the moment, DappStarter supports three blockchains — Ethereum, Harmony, and Klaytn with more blockchains being added frequently.

Step 2: Select your front end framework

You can choose your favorite frontend framework to power your dapp!

Step 3: Customize features to fit your needs

The dapp code generated by DappStarter has many out-of-the-box features, including smart contract code, tests for your smart contracts, a web app front-end, and a server-side API. You can leverage these features to build your proxy voting dapp.

Access Control

Access Control Block gives you, as a company, granular control over who can manage your contracts and control their options. For instance, if you want to start or stop voting capabilities, you would use this block.

File Storage

Most apps store information, but storage is incredibly expensive on the blockchain so any information stored for a dapp should use decentralized file storage options. For example, if you want to upload the agenda doc, this would be a good fit!

Authentication

For any dapp that deals with voting, authentication is fundamental to ensure only the shareholders are able to vote. With DappStarter, you will not need to worry about implementing an authentication system on your own, this feature will be available very soon.

If you feel there should be more out-of-the-box features, feel free to let us know!

Click on the CREATE DAPP button. This will point you to a unique Github repository generated on-the-fly for you. You can find your code here. This is going to be your playground!

You can make modifications according to your business logic in Contracts/Dapp.sol file. For instance, you may want to define response options for your voting agenda. Different voting agendas may require different response answers. For example, consider a hypothetical voting agenda “Do you want Ms. CryptoQueen to be a part of board of directors?”. The response can be YES, or NO, or ABSTAIN. Another voting agenda can be “Who do you want to be the CEO — Ms. CryptoKitty or Mr. CryptoDog?” Here, the response may change — you’d choose between Ms. CryptoKitty and Mr. CryptoDog.

This is just an example of one of the many subtleties you as a developer would need to cater to.

Blockchain technology is becoming increasingly important and as the technology continues to evolve, new use cases emerge. Corporate governance, specifically relating to shareholder franchise, is a fantastic use case that has the potential to leverage the auditability and privacy that blockchain can offer.

Start building with DappStarter.

How Blockchain Could Change Corporate Governance for the Better was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

Regardless of this buzz, the textbook pundits still believe that the rationale behind blockchain technology is to prevent monopolistic dominance.

Yet here we are talking about the top 3 enterprise blockchains you should definitely know about to keep your business at the top!

Enterprises are always on the lookout for improving their solutions to keep up with the consumer driven economy and, also shooting up their revenue at the same time.

Thanks to the advent of enterprise blockchains; businesses can now optimize their legacy solutions to become more secure, scalable, transparent, robust, and cost-efficient.

One of the biggest USPs of an enterprise blockchain is to provide the business with the freedom to tailor the specifics of the blockchain according to their own needs. This level of flexibility cannot be offered by any public blockchain at the moment.

Without any further ado, let’s explore the top 3 enterprise blockchains that have the potential to take your business to the next level.

#1. Insolar

Let’s start the list with the most future-proof enterprise blockchain.

Insolar is the next-gen enterprise-ready blockchain platform. Insolar has successfully addressed most of the pressing issues that were hampering with mass adoption of blockchain. For example, Insolar is interoperable with other DLTs, it enables on-chain document storage and processing, and also dynamic consensus algorithms can be used on Insolar platform.

At the moment, Insolar has recorded a performance of 19,500+ TPS on 20 nodes. Unlike other blockchain platforms, Insolar becomes more powerful as more nodes join the network. In other words, Insolar’s performance and security will be enhanced as the number of nodes increases in the network.

Here are some cutting edge technical advantages of the Insolar platform:

• Near-linear scalability
• Best-in-class data protection
• Simplified development
• Interoperability with other DLTs
• Seamless connectivity with existing enterprise software systems
• Supports hybrid networks
• Manages regulatory compliance (GDPR, HER, HIPAA, EMR, and others)
• Easily integratable through HTTP and message-based API
• Continuous evolution of the platform

According to Cryptomiso, Insolar has been the most active project on GitHub over the last 12 months and according to Coincodecap, Insolar is the most active project since last three months.

Insolar is fast growing and has already established itself across multiple industries like energy & utilities sector, supply chain & logistics sector, retail & consumer industry, automotive industry.

#2. Hyperledger Fabric

Linux Foundation’s and IBM’s Hyperledger Fabric is one of the most widely accepted and mature enterprise blockchain solutions available right now.

Hyperledger Fabric’s modular architecture coupled with large community support makes it a great choice for enterprise-grade cross-industry applications. At the moment, Hyperledger Fabric’s capacity ranges from 3000 TPS to 20,000 TPS.

Here are some features of the Hyperledger Fabric:

• Large and mature community
• Great performance and scalable
• Modular architecture supporting plug-in components such as consensus algorithms
• Smart contracts called ‘chaincodes’ can be hosted using the container technology
• Supports channel technology for confidential transactions
• Complete protection of digital keys and sensitive data
• Allows rich queries over an immutable distributed ledger

Santander, the Spanish banking giant, has launched real-time trades in Spain which is powered by Hyperledger Fabric. UBS, the Swiss bank, is also working with IBM to create a UBS-backed blockchain trade finance platform. Also, the data-storage company Seagate Technology has collaborated with IBM on Hyperledger Fabric to prevent counterfeiting of electronics.

#3. Quorum

JPMorgan’s Quorum is an open-source Ethereum based enterprise-focused permissioned blockchain. The strongest point of Quorum is that all future Ethereum updates can be easily incorporated with Quorum.

Quorum’s speed of processing transactions is higher than that of Ethereum. With two nodes running, Quorum can go as high as 140 TPS. It supports private as well as public transactions.

Here are some highlights of Quorum:

• Extension of Ethereum
• 100 % privacy of transaction and contract
• Multiple voting-based consensus mechanisms
• Network/Peer permissions management
• Higher performance than Ethereum

The most known “dApp” on Quorum is the implementation of JPM coin. It has the potential to become a yardstick for the financial institutions.

Conclusion

Given the rudimentary state of blockchain technology, we have witnessed a high-velocity evolution taking place at a global scale.

We saw that each blockchain platform has remarkable features of its own. At the end of the day, it is all about which one fits in best with your business. Today, most of the businesses look for flexibility and agility without compromising on quality.

The future of enterprise blockchain is will focus on high scalability, interoperability, and governance. This is why Insolar may make a future-proof choice (at least for the foreseeable future) for your enterprise.

Let’s take a moment to get a bigger picture of these three enterprise blockchains by comparing them.

Such powerful implementations of enterprise blockchains will definitely lead to a larger adoption of the blockchain technology.