こんにちは 堤です。 3月1日にChatGPTのAPIが公開されました。 openai.com APIが公開されたことでChatGPTを活用したアプリが色々登場して盛り上がっていますね！ 今回はPythonのみで簡単にWebアプリを作成できるStreamlitとChatGPT APIを組み合わせて簡単にAIアプリを作成する方法をご紹介します。 Streamlitについて StreamlitはフロントもバックエンドもPythonのみの記述でWebアプリケーションを作成できるフレームワークです。 streamlit.io Webアプリ作りたいけどフロントの知識が全くない。。という人でもUIが簡単に作成できるのでとても便利です。 データ可視化や機械学習モデルの共有がとても簡単にできるのでデータサイエンスの領域でよく使われています。 作成するアプリ 今回はこのChatGPT APIとStreaml
ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた（microCMS + Amazon S3） | DevelopersIO
はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。 今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました！ ※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。 ヘッドレスCMSとは？ CMS（Content Management System）とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。 最も
If you're already somewhat familiar with promises, here are some shortcuts to save you some precious scrolling time. Introduction When writing JavaScript, we often have to deal with tasks that rely on other tasks! Let's say that we want to get an image, compress it, apply a filter, and save it 📸 The very first thing we need to do, is get the image that we want to edit. A getImage function can tak
Optimize long tasks Stay organized with collections Save and categorize content based on your preferences. Commonly available advice for making your JavaScript apps faster often includes "Don't block the main thread" and "Break up your long tasks." This page breaks down what that advice means, and why optimizing tasks in JavaScript is important. What is a task? A task is any discrete piece of work
New – A Shared File System for Your Lambda Functions | Amazon Web Services
AWS News Blog New – A Shared File System for Your Lambda Functions July 1, 2020: Post updated to take care that Amazon EFS increased file system minimum throughput, when burst credits are exhausted, to 1 MiB/s. I am very happy to announce that AWS Lambda functions can now mount an Amazon Elastic File System (Amazon EFS), a scalable and elastic NFS file system storing data within and across multipl
Vueユーザーが感じたSvelteのおもしろい機能を紹介する - SMARTCAMP Engineer Blog
スマートキャンプでエンジニアをしている瀧川です！ 2月に育休を取得し、3月に復帰したと思ったらコロナでリモートワーク、そしてチーム異動となかなか落ち着かない今日このごろ。 みなさんいかがお過ごしでしょうか？ 今回家にいる時間が多くなり、せっかくだから新しいことしたいよなーということで、以前から気になっていた Svelteを触ることにしました！ Svelteの紹介記事では、「Vue.jsと構文が似ているため習熟が簡単」「Vue.jsの50倍早い」みたいなところにフォーカスされることが多いかなと思いますが、本記事ではSvelteのTutorialをやるなかで、フレームワーク(ライブラリ)の機能として普段Vue.jsを利用している私がおもしろいなーと思ったものをご紹介したいと思います。 Svelteとは 基本文法 特徴的な機能 propsやclassの省略記法 Await Block React
ChatGPT Bot を new Slack Platform で動かしてみた - LayerX エンジニアブログ
こんにちは、LayerX の Enabling Team の suguru です。 ChatGPT のAPIが公開されて、ものすごい勢いで Slack へのインテグレーションが始まりそうです。 API 利用する場合は、会話の内容が学習などに使われることはない、ということで、安心して利用できそうです。 LayerX でも、早速ChatGPTが応答してくれるボットを作ってみることにしました。 今回は new Slack Platform を使うことにしました。new Slack Platform は、Slack Cloud と呼ばれる Slack 側のサーバーでコードを動かす機能があります。Slack にコードをデプロイするだけで、サーバーの準備等をしなくても ChatGPT を自分たちの SlackBot として埋め込むことができます。 注 - new Slack Platform は執筆時
みなさんこんにちは。この記事はTypeScript Advent Calendar 2020の5日目の記事です。 TypeScriptにはintersection typeという機能があります。これはT & Uのような構文をもつ型であり、意味としては「TでもありUでもある型」です。 構造的部分型とIntersection Type 「TでもありUでもある」という説明の仕方をされるとIntersection Typeが何の役に立つのかピンと来ないという方がいるかもしれません。実際のところ、Intersection Typeはオブジェクト型を合体するという役割によく使われます。 例えば、Tが{ foo: string }型でUが{ bar: number }型だった場合、T & Uは実質上{ foo: string; bar: number }型となります。 type T = { foo: s
を追記すれば準備完了です。 改変元のソースを用意する 新しい書き方を学ぶには 既存コードの改変がとっつきやすいです。 お決まりの Todo アプリで行きます。まずはテンプレートを用意しましょう。 きみは今まで作った Todo アプリの数をおぼえているか。 <script> export default { data:() => ({ todoList: [], tempTodoName: '', taskId: 0 }), computed: { itemCount() { return this.todoList.length } }, methods: { updateTaskName(name) { this.tempTodoName = name }, addTodoItem() { this.todoList = [ ...this.todoList, { id: this.ta
まいどです。テクニカルディレクターのやなさんです。 さて、Web制作やサービス開発の現場ではもちろんのこと、仕事を進めるなかで「定例のミーティング」って絶対ありますよね？ ミーティングを行うということは、みなさん議事録やアジェンダを作成しているかと思います。 その週次・月次ミーティング用の議事録やアジェンダを準備する際…… 該当のフォルダを開いて ファイルをコピーして アジェンダを更新して メンバーへ通知する っていう作業を毎回毎回やっていたりしませんか？？ こういう作業って、単純に手間ですし、作業中のタスクを止めることで集中が切れてしまうことをとても非効率に感じてました。 ということで、自動で作成されるようにしてみました（一定の部分まで）。 LIGでは、ドキュメントはG Suite、コミュニケーションツールはSlackを利用しています。 今回、上記1・2・4が自動となるように、GAS（G
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
エンジニアの伊藤です。 ようやく梅雨が開けたと思ったらすでに立秋。残暑は残るどころか日に日に増している感じさえあります… 🥵 。 この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラを紹介します。Babel プラグインに踏み込んでいきたいのですが、理解を助けるためにまず Babel が何をするツールなのかから説明します。 Babelとは Babel の処理の流れ AST (Abstract Syntax Tree) Babel プラグイン Babel プラグイン プロジェクト最小構成 Hello World 「プロファイラ」で何をするのか まとめ Babel プラグイン開発に参考になったサイト おまけ Babelとは フロントエンドの開発を行っている方にはお馴染みな Babel
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
海外ベンダーの資料にAWSはIaaSでAzureはPaaSって書いてて面白いなと思うと同時に、妙に腑に落ちる分類だなと思いました。それをツイートしたところ、どういうことか書けよとばかりに拡散されたので書きました。 もちろんそんなにバッサリ区分けできるものじゃないし、AWSにはlambdaとかRDSとかPaaSの人気サービスがたくさんあります。逆にAzureにだってIaaSはあります。 でも、そういう区分けをしていることに納得できる理由。それは、設計思想が違うからです。 なお、本記事は私の偏見のみで構成されております。 2020/12/23追記 lambdaは2010年ではなく2014年開始との指摘を多数いただいたので修正いたします。調べもせずに適当に書いてすみませんでした。また他にも「GCPこそPaaSでは？」「GCPはSaaS」などGCPを比較する声がものすごくたくさんありましたが、私の
Emacs-Lisp入門 2021
*scratch* バッファ S式の評価 直前のS式を評価 → C-j（結果は次行） カーソルの直前のS式を評価 → C-x C-e / eval-last-sexp（結果はミニバッファ） カーソルの位置か、そこ以前の行頭で始まるS式を評価 → M-C-x / eval-defun バッファ全体を評価 → M-x eval-buffer 選択範囲を評価 → M-x eval-region 各種定義の確認 関数定義の確認 → (symbol-function '関数名) interactiveじゃない関数をEval → M-: / eval-expression 入力履歴は M-: からの M-p / M-n で辿れる C-x M-: / C-x M-ESC で直前のコマンドを再実行 / repeat-complex-command 入力シンボルの補完 → M-Tab (emacs-list
V8 Runtime Overview | Apps Script | Google for Developers
Send feedback V8 Runtime Overview Stay organized with collections Save and categorize content based on your preferences. In Apps Script and JavaScript, a runtime or runtime environment contains the JavaScript engine that parses and executes script code. The runtime provides rules for how memory is accessed, how the program can interact with the computer's operating system, and what program syntax
EventEmitterのようにPub/Subを行うeventmitという小さなライブラリを書きました。 azu/eventmit: Simple EventEmitter. A single event object per an event. eventmitは、TypeScriptで書かれています。 また、Node.jsのEventEmitterなどとは違って、イベント一つに対してeventmitのオブジェクトを一つ作成して使います。 import { eventmit } from "eventmit"; const event = eventmit<{ key: string }>(); // Register handler event.on((value) => { console.log(1, value); }); event.on((value) => { consol
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
Peter Jay Salzman, Michael Burian, Ori Pomerantz, Bob Mottram, Jim Huang 1 Introduction 1.1 Authorship 1.2 Acknowledgements 1.3 What Is A Kernel Module? 1.4 Kernel module package 1.5 What Modules are in my Kernel? 1.6 Is there a need to download and compile the kernel? 1.7 Before We Begin 2 Headers 3 Examples 4 Hello World 4.1 The Simplest Module 4.2 Hello and Goodbye 4.3 The __init and __exit Mac
TypeScriptと遺伝的アルゴリズムの勉強のために、 こちらページ のプログラムをTypeScriptに書き換えてみます。 PythonにはあるけどTypescriptにはない関数なんかもあるので、そういう関数も他のサイトを参考にしつつ実装して進めます。 遺伝的アルゴリズムの解説は、参考ページや、そこにリンクのあるスライドがとても詳しいので、そちらを参照してください。 ソースコードはこちらで公開しています。 追加した算術関数 ここは本質ではないので、参考サイトのコピペで済ましています。 Sum 配列の合計を求める関数 参考サイト // 合計の算出 function sum(arr: Array<number>): number { return arr.reduce(function(prev, current, i, arr) { return prev + current; });
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPT APIとStreamlitを使って超簡単にAIアプリを作ってみた - NRIネットコムBlog
⭐️🎀 JavaScript Visualized: Promises & Async/Await
Optimize long tasks | Articles | web.dev
TypeScriptでMapped Typesを使ってきれいなインターフェースを作る話 - Qiita
Vue Function API で簡単に view と logic を分離しよう - Qiita
【GAS】自動で議事録を作成しSlackに定型の情報を通知する方法
作って理解する Babel プラグイン - Techtouch Developers Blog
iframe sandboxでユーザー入力スクリプトを実行する
AWSはIaaSでAzureはPaaSという観点で違いを説明｜佐々木康介
小さなEventEmitterライブラリ - eventmitを書いた
module bundlerの作り方(準備編) - hiroppy's site
The Linux Kernel Module Programming Guide
【習作】TypeScriptで遺伝的アルゴリズム - Qiita