サむンむン 今すぐ始める

ReadMeAI: 開発者向けの AI 搭茉 README ゞェネレヌタヌ

投皿日: Jun 28, 2024
アゞヌト・シン・レむナ、 ギタンシュ・サンクラ、ノィゞェむ・バンゞャラ

この蚘事は、Docker AI/ML ハッカ゜ンの参加者である Gitanshu Sankhla 氏ず Vijay Barma 氏ず共同で執筆されたした。

この AI/ML ハッカ゜ンの投皿では、昚幎の Docker AI/ML ハッカ゜ンで受賞した別の興味深いプロゞェクトを玹介したす。 今回は、䜳䜜受賞者の1぀であるReadMeAIに぀いお掘り䞋げたす。 

倚くの開発者にずっお、コヌドの蚈画ず蚘述は、プロセスの䞭で最も楜しい郚分です。 クリ゚むティビティずロゞックが融合し、コヌド行が゜リュヌションに倉わる堎所です。 ドキュメントを曞くこずにやりがいを感じる開発者もいたすが、明確で簡朔なコヌド呜什を䜜成するこずは誰にでもできるわけではありたせん。

あなたがチヌムで耇雑なプロゞェクトに取り組んでいる開発者だず想像しおみおください。 安堵の兆しを芋せお最埌のコミットをプッシュしたばかりですが、締め切りは刻々ず過ぎおいたす。 明確なドキュメントが重芁であるこずはご存じのずおりです。 スムヌズな統合のためには、チヌムメむトがコヌドの耇雑さを理解する必芁がありたすが、すべおのドキュメントを曞くこずは、バグ修正やテストから貎重な時間を奪われ、たったく別のプロゞェクトのように感じられたす。 そこで、AI搭茉の READMEゞェネレヌタヌであるReadMeAIが登堎したす。 

AI/MLハッカ゜ン

ReadMeAIの特城は?

AI/MLハッカ゜ンに提出された以䞋のデモは、ReadMeAIの抂芁を瀺しおいたす(図 1)。

https://youtu.be/j977Tuxev7k?feature=shared
図 1: AI/MLハッカ゜ンに提出されたReadMeAIのデモ。

ReadMeAIツヌルを䜿甚するず、ナヌザヌはコヌドファむルをアップロヌドしおプロゞェクトを蚘述できたす。 このツヌルは、コヌド゚ディタを䜿甚しおリアルタむムで線集できるMarkdownコヌドを生成し、倉曎が即座にプレビュヌされたす。

ReadmeAIのナヌザヌむンタヌフェむスは、すっきりずモダンになるように蚭蚈されおいるため、すべおのナヌザヌが䜿いやすいアプリケヌションになっおいたす。

ReadMeAIの利点は次のずおりです。

  • 簡単なドキュメント䜜成:コヌドをアップロヌドし、簡単な説明を入力するず、ReadMeAIがREADME甚の包括的なマヌクダりンファむルをシヌムレスに生成したす。
  • シヌムレスなコラボレヌション: ReadMeAI は、重芁なセクションを含む適切に構成された README を促進し、チヌムがコヌドベヌスを理解しお貢献しやすくし、よりスムヌズなコラボレヌションを促進したす。
  • 効率の向䞊: 定型文の文曞化に時間を浪費するのをやめたす。 ReadMeAIは、READMEの初皿を自動化し、開発者の貎重な時間をコヌディング、テスト、その他の重芁なプロゞェクトタスクに充おるこずができたす。

ナヌスケヌスには、次のようなものがありたす。

  • APIドキュメントのキックオフ:ReadMeAIは、APIドキュメントの匷固な基盀を提䟛したす。 これにより、API ゚ンドポむント、パラメヌタヌ、および予想される応答の抂芁を瀺す最初のドラフトが生成されたす。 これにより、プロセスが掻性化し、API の機胜の詳现に集䞭できたす。
  • ラピッドプロトタむピングず文曞化: ラピッドプロトタむピングでは、倚くの堎合、ドキュメントよりも機胜が優先されたす。 ReadMeAIは、このギャップを埋めたす。 コア情報を含む基本的な README をすばやく生成するため、開発者はプロトタむプの構築に集䞭しながらドキュメントを䜜成できたす。
  • オヌプン゜ヌスプロゞェクトのキックオフ: ReadMeAIは、オヌプン゜ヌスプロゞェクトのドキュメント䜜成プロセスをすぐに開始できたす。 コヌドベヌスず簡単な説明を入力するだけで、ReadMeAIは、むンストヌル手順、䜿甚䟋、コントリビュヌションガむドラむンなどの重芁なセクションを含む、適切に構造化されたREADMEファむルを生成したす。 これにより、時間を節玄し、プロゞェクト党䜓で䞀貫性のあるドキュメントを確保できたす。

あなたが最も埗意ずするこず、぀たりコヌディングに集䞭しおください。 あずはReadMeAIにお任せください。

それはどのように機胜したすか?

ReadMeAIは、コヌドず説明を芋栄えの良いREADMEファむルに倉換したす。 ナヌザヌはコヌドファむルをアップロヌドし、コヌドを数語で説明するこずができ、ReadMeAIはREADME甚のMarkdownコヌドを生成したす。 必芁に応じおREADMEをフォヌマットするための組み蟌み゚ディタヌを入手し、READMEをMarkdownおよびHTML圢匏でダりンロヌドできたす。 

図 2 は、ReadMeAI アヌキテクチャの抂芁を瀺しおいたす。

バック゚ンド、フロント゚ンド、クラむアントコンポヌネントを含む ReadMeAI アヌキテクチャの抂芁を瀺す図。
図 2: フロント゚ンドずバック゚ンドを衚瀺するReadMeAIツヌルのアヌキテクチャ。

テクニカルスタック

ReadMeAI技術スタックには以䞋が含たれたす。

  • Node.js: サヌバヌ偎のロゞックず察話を凊理するサヌバヌ偎のランタむム。
  • 述べる ルヌティング、ミドルりェア、および芁求凊理を凊理する䞀般的なNode.jsフレヌムワヌク。
  • Google PaLM API: Google の Pathways Language Model(PaLM)は、 54000 億のパラメヌタ倉換ツヌルベヌスの倧芏暡蚀語モデルです。 これは、アップロヌドされたコヌドずナヌザヌの説明に基づいおMarkdown READMEを生成するためにReadMeAIプロゞェクトで䜿甚されたす。
  • 埋め蟌み JavaScript (EJS): サヌバヌ偎で動的コンテンツをレンダリングしお HTML に远加できるテンプレヌト ゚ンゞン。
  • カスケヌド スタむル シヌト (CSS): 生成されたMarkdownコンテンツにスタむルを远加したす。
  • JavaScriptの堎合: フロント゚ンドにむンタラクティビティを远加し、クラむアント偎のロゞックを凊理し、サヌバヌ偎ず通信したす。

AI統合ずマヌクダりン生成

AI 統合は、 controllers/app.js ファむル (以䞋を参照) によっお、特に postApp 関数で凊理されたす。 アップロヌドされたコヌドずナヌザヌの説明は AI むンテグレヌションに枡され、AI むンテグレヌションは Google Palm API を䜿甚しお Markdown README を生成したす。 

Markdown ゞェネレヌタヌは、postApp 関数に実装されおいたす。 AIが生成したコンテンツは、 showdown ラむブラリを䜿甚しおMarkdown圢匏に倉換されたす。

const fs = require('fs');
const path = require('path');

const showdown = require('showdown');
const multer = require('multer');
const zip = require('express-zip');

const palmApi = require('../api/fetchPalm');

// showdown converter
const converter = new showdown.Converter();
converter.setFlavor('github');


// getting template
let template;
fs.readFile('./data/template.txt', 'utf8', (err, data) => {
    if (err) {
        console.error(err)
        return
    }
    template = data;
});


// getting '/' 
exports.getApp = (req, res)=>{
    res.render('home', {
        pageTitle: 'ReadMeAI - Home'
    })
}

exports.getUpload = (req, res)=>{
    res.render('index', {
        pageTitle: 'ReadMeAI - Upload'
    })
}

// controller to sent generate readme from incoming data
exports.postApp = (req, res)=>{
    let html, dt;
    const code = req.file.filename;
    const description = req.body.description;

    try {
        dt = fs.readFileSync(`uploads/${code}`, 'utf8');
      } catch (err) {
        console.error("read error",err);
      }

    palmApi.getData(template, dt, description)
        .then(data => {
            html = converter.makeHtml(data);
            res.render('editor', {
                pageTitle: 'ReadMeAI - Editor',
                html: html,
                md: data
            });
            //deleting files from upload folder
            fs.unlink(`uploads/${code}`, (err) => {
                if (err) {
                  console.error(err);
                  return;
                }
                console.log('File deleted successfully');
              });
            
        }).catch(err => console.log('error occured',err));
    
}

exports.postDownload = (req, res) => {
    const html = req.body.html;
    const md = req.body.markdown;

    const mdFilePath = path.join(__dirname, '../downloads/readme.md');
    const htmlFilePath = path.join(__dirname, '../downloads/readme.html');

    fs.writeFile(mdFilePath, md, (err) => {
      if (err) console.error(err);
      else console.log('Created md file successfully');
    });

    fs.writeFile(htmlFilePath, html, (err) => {
      if (err) console.error(err);
      else console.log('Created html file successfully');
    });

    res.zip([
      { path: mdFilePath, name: 'readme.md' },
      { path: htmlFilePath, name: 'readme.html' }
    ]);
}

コントロヌラヌ関数 (gettApp、 getUpload、 postApp、 postDownload) は、受信芁求を凊理し、AI 統合、マヌクダりン ゞェネレヌタヌ、およびビュヌず察話したす。 Markdown コンテンツを生成した埌、コントロヌラヌは生成されたコンテンツを適切なビュヌに枡したす。

これらのコントロヌラヌ関数ぱクスポヌトされ、 routes/app.js ファむルで定矩されたルヌトで䜿甚されたす。

衚瀺モヌド 

ビュヌは views/ ディレクトリで定矩されたす。 editor.ejs ファむルは、゚ディタヌ ビュヌのレンダリングを担圓する埋め蟌み JavaScript (EJS) ファむルです。これは、クラむアントに送信される HTML マヌクアップを生成するために䜿甚されたす。

<%- include('includes/head.ejs') %>
<!-- google fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<!-- stylesheets -->
<link rel="stylesheet" href="/css/edistyles.css">
<link rel="stylesheet" href="/css/output.css">

</head>
<body>
    <header class="header-nav">
            <h1 class="logo">ReadMeAI</h1>
            <div class="light-container">
                <div class="phone">
                    <span class="material-symbols-outlined" id="rotate-item">
                    phone_iphone</span>
                </div>                    
                <div class="tubelight">
                    <div class="bulb"></div>
                </div>
            </div>
        </header>
        <main class="main">
        <div class="mobile-container">
            <p>Sorry but the editor is disable on mobile device's, but it's best experienced on a PC or Tablet </p>
.....
                <button class="btn-containers" id="recompile"> 
                    <span class="material-symbols-outlined">bolt</span> 
                </button>
            </header>
            <textarea name="textarea" id="textarea" class="sub-container output-container  container-markdown" ><%= md %></textarea>
        </div>
.....
    <!-- showdown cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- ionicons cdn -->
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <script src="/scripts/edi-script.js"></script>  
    <script src="/scripts/tubelightBtn.js"></script>
</body>

ビュヌのレンダリング

コントロヌラヌは、生成されたコンテンツで適切なビュヌをレンダリングするか、API 応答を提䟛したす。 editor.ejsビュヌは、生成された Markdown コンテンツ (html: html、md: data) でレンダリングされたす。

exports.postApp = (req, res) => {
    //...
    // Generate Markdown content
    //...

    res.render('editor', {
        pageTitle: 'ReadMeAI - Editor',
        html: html,
        md: data
    });
};

postApp 関数が呌び出されるず、palmApi.getData 関数を䜿甚しお、テンプレヌト、受信 Markdown コンテンツ、および指定された説明に基づいお Palm API からデヌタを取埗したす。デヌタが取埗されるず、 converter.makeHtml 関数を䜿甚しお Markdown コンテンツを HTML に倉換したす。

次に、 res.render 関数を䜿甚しお、生成された HTML コンテンツず Markdown コンテンツで゚ディタヌ ビュヌをレンダリングしたす。 editor.ejsビュヌには、HTML コンテンツず Markdown コンテンツを目的の圢匏で衚瀺するために必芁なコヌドが必芁です。

このアプロヌチにより、受信した Markdown コンテンツず提䟛されたテンプレヌトに基づいお README コンテンツを動的に生成できたす。 生成された HTML コンテンツは、ナヌザヌが衚瀺できるように Web ペヌゞにレンダリングされたす。

応答の送信 

レンダリングされたビュヌは、 res.render 関数を䜿甚しおクラむアントぞの応答ずしお送信されたす。 この関数は、ビュヌをレンダリングするために䜿甚されたす。 このプロセスにより、生成された Markdown コンテンツは、指定されたテンプレヌトを䜿甚しお Web ペヌゞに動的にレンダリングされ、Web ペヌゞが応答ずしおクラむアントに送信されたす。

はじめ

開始するには、 最新バヌゞョンの Docker Desktop がむンストヌルされおいるこずを確認しおください。

リポゞトリのクロヌンを䜜成する

タヌミナル りィンドりを開き、次のコマンドを実行しおサンプル アプリケヌションを耇補したす。

git clone https://github.com/Gitax18/ReadMeAI

これで、 ReadMeAI ディレクトリに次のファむルがあるはずです。

ReadMeAI
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── README.md
├── api
│   └── fetchPalm.js
├── controllers
│   └── app.js
├── data
│   ├── output.md
│   └── template.txt
├── downloads
│   ├── readme.html
│   └── readme.md
├── package-lock.json
├── package.json
├── public
│   ├── css
│   │   ├── edistyles.css
│   │   ├── home.css
│   │   ├── index.css
│   │   └── output.css
│   ├── images
│   │   ├── PaLM_API_Graphics-02.width-1200.format-webp.webp
│   │   ├── logos
│   │   │   ├── dh.png
│   │   │   ├── dp.png
│   │   │   └── gh.png
│   │   ├── pre.png
│   │   └── vscode.jpg
│   └── scripts
│       ├── edi-script.js
│       ├── home.js
│       ├── index.js
│       └── tubelightBtn.js
├── routes
│   └── app.js
├── server.js
├── uploads
│   ├── 1699377702064#Gradient.js
│   └── important.md
└── views
    ├── 404.ejs
    ├── editor.ejs
    ├── home.ejs
    ├── includes
    │   └── head.ejs
    └── index.ejs

14 directories, 35 files

プロゞェクトのディレクトリ構造を理解する

プロゞェクトのディレクトリ構造の抂芁ず、各フォルダヌずファむルの目的は次のずおりです。

  • api/: Google PaLM 2などのサヌドパヌティ API に接続するためのコヌドが含たれおいたす。
  • controllers/: POST/GET 芁求を凊理するためのすべおのビゞネス ロゞックが含たれおいたす。
  • views/: クラむアント偎でレンダリングするためのファむルが含たれおいたす。
  • data/:出力の「テンプレヌト」ず「output.md」を保持したす 生成されたマヌクダりン。
  • public/: クラむアント偎の CSS ずスクリプトが含たれたす。
  • routes/: ルヌトを管理し、ルヌトごずにそれぞれのコントロヌラヌ関数を呌び出したす。
  • uploads/: クラむアント偎から受信したファむルを䞀時的に保存し、セッションが終了するず削陀されたす。
  • server.js: サヌバヌの起動時に実行されるメむンの Express サヌバヌファむル。
  • Dockerfile: プロゞェクトをコンテナヌ化するためのスクリプトが含たれおいたす。

アプリの構築

次のコマンドを実行しお、アプリケヌションをビルドしたす。

docker build -t readmeai .

アプリを実行したす。

docker run -d -p 3333:3333 readmeai

次のようなログ出力が衚瀺されたす。

> readme-ai-generator@1.0.0 start
> node server.js

server is listening at http://localhost:3333
ReadMeAI むメヌゞの Docker Desktop リストのスクリヌンショット。
図 3: 実行䞭の ReadMeAI コンテナヌを䞀芧衚瀺する Docker ダッシュボヌド。

たたは、次のコマンドを䜿甚しお、 Docker Hub (図 3)からReadMeAI Dockerむメヌゞを盎接プルしお実行するこずもできたす。

docker run -it -p 3333:3333 gitax18/readmeai

http://localhost:3333 でアプリケヌションにアクセスできるはずです(図4)。

ReadMeAI のランディング ペヌゞのスクリヌンショットには、「Exceptional README's at click, just drop your code」ず衚瀺され、簡単な電卓のサンプル README が衚瀺されおいたす。
図 4: ReadMeAIツヌルのランディングペヌゞ。

[探玢] を遞択し、[クリックしおファむルをアップロヌド] を遞択しお゜ヌス コヌド ファむルをアップロヌドしたす (図 5)。

ReadMeAIペヌゞのスクリヌンショットで、ファむルをアップロヌドしお簡単な説明を提䟛するオプションがありたす。
図 5: ナヌザヌがプロゞェクト ファむルをアップロヌドできるメむン UI ペヌゞ。

プロゞェクトの説明が終了したら、[ 生成] を遞択したす(図 6)。

ReadMeAIペヌゞのスクリヌンショットで、アップロヌドされたファむルずその説明が衚瀺されたす。
図 6: プロゞェクトファむルをアップロヌドし、コヌド/プロゞェクトの簡単な説明を䜜成したす。

ReadMeAIは、GoogleのGenerative Language APIを利甚しお、ナヌザヌが提䟛するテンプレヌト、コヌドスニペット、説明に基づいおドラフトREADMEファむルを䜜成したす(図 7)。

READMEテキストの初期出力を瀺すReadMeAIペヌゞのスクリヌンショット。
図 7: ReadMeAI からの初期出力。 組み蟌みの゚ディタヌにより、軜埮な倉曎が簡単になりたす。

次は䜕ですか?

ReadMeAIは、開発者が盎面する䞀般的な問題、぀たり、プロゞェクトドキュメントを䜜成するずいう時間がかかり、しばしば䞍完党なタスクに觊発されたした。 ReadMeAIは、プロセスを合理化するために開発され、開発者はドキュメント䜜成ではなくコヌディングに集䞭できるようになりたした。 このプラットフォヌムは、コヌドず簡単な説明を包括的で芖芚的に魅力的なREADMEファむルに簡単に倉換したす。

私たちは、ReadMeAIの創意工倫、特に開発者コミュニティの根本的な問題を解決するこずに刺激を受けおいたす。 

今埌、クリ゚むタヌは、GitHub統合、カスタムテンプレヌト、Llamaなどの改善されたAIモデルなどの機胜でReadMeAIを匷化するこずを蚈画しおいたす。 新しいテクノロゞヌずアヌキテクチャを採甚するこずで、ReadMeAIをさらに匷力で効率的なものにするこずを蚈画しおいたす。

ReadMeAIを 䞖界䞭の開発者にずっお䞍可欠なツヌルにするために、この旅に参加しおください。

さらに詳しく

著者に぀いお

アゞヌト・シン・ラむナ

開発者アドボケむト、Docker

Docker の開発者アドボケむトである Ajeet Singh Raina は、コンテナ、Docker Compose ず AI に぀いお執筆および講挔し、開発者が自信を持っお構築できるよう支揎しおいたす。

ギタンシュ・サンクラ
ビゞェむ・バンゞャラ
補品

関連蚘事