Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WASMで画像生成するためにデータを受け渡す

 WASMで画像生成するためにデータを受け渡す

lapis2411

April 10, 2024
Tweet

More Decks by lapis2411

Other Decks in Programming

Transcript

  1. 今日話す内容 • Goで書いたwasmに対してデータを渡す方法 • https://board-game-drafters.vercel.app/produce ◦ カードゲームのモックを作成するためのApp(beta) 今日話さない内容 • 画像生成の詳細

    ◦ 画像生成といいつつ生成AIみたいなものではなく 単純に入力した文字列からカード画像を作成するものです • https://github.com/lapis2411/card-generator
  2. やりたかったこと 入力された文字列をWASMに渡す 1行のデータを以下のようなJSON形式で受け取りたい (サーバーで実行することも可能なようにJSONでデータ受け 取りたい) { "id":1, "name":"name1", "data":[ {"styleID":1,"text":"name1"},

    {"styleID":2,"text":"lu1"}, {"styleID":4,"text":"this is text"}, {"styleID":5,"text":"ld1"}] } 1つのカードに1つのdataがあってその中にスタイル情報(どの位置にどのサイズで 描画するか)に紐づいたテキストが複数ある
  3. 実現方法1 Go側の処理 func main() { c := make(chan struct{}, 0)

    cg := NewCardGenerator() js.Global().Set("cardGenerator", js.ValueOf( map[string]any{ "CreateImages": js.FuncOf(CreateImages), }, )) <-c } func CreateImages(this js.Value, args []js.Value) any { str := js.Global().Get("JSON").Call("stringify", args[0]).String() // 生成処理など }
  4. 実現方法2 書き込む領域のポインタを受け取る処理 JSから呼んで書き込む領域を把握する 確保した領域のどこまでをデータとして扱うか知るために 文字数も先に指定 func (c *CardGenerator) GetBuffer(this js.Value,

    args []js.Value) any { if len(args) == 0 { return nil } size := args[0].Int() if size <= 0 || inputBufferSize < size { return nil } *c.inputSize = size c.clearBuffer(size) return js.ValueOf(uintptr(unsafe.Pointer(c.cardCSVHead))) }
  5. 実現方法2 JSでWASMの確保した領域に文字を書き込む const json = JSON.stringify(cards); const proc = async

    () => { const encoder = new TextEncoder(); const encodedStr = encoder.encode(json); const address = await cardGenerator.GetBuffer (encodedStr.length); const buf = inst?.exports.mem.buffer; // inst はWASM Instance const mem = new Int8Array(buf); const view = mem.subarray(address, address + encodedStr.length); for (let i = 0; i < encodedStr.length; i++) { view[i] = encodedStr[i]; } // @ts-ignore cardGenerator.CreateImages (); };