2024年8月6日 星期二

PHP 開發筆記 - 嘗試使用 Laravel + Twill CMS Toolkit 開發 CMS 後台管理服務 @ macOS M1



近期公司內部服務都朝向 Laravel framework 來維護，其中常見需求是製作具有 CMS 管理的機制，提供不同部門的同事編輯資料及發佈出去。就來試試看 Twill 這個 CMS Toolkit 套件。從他的文件得知，引入他可以快速擁有後台登入機制，以及省去自己規劃資料庫的資料表，而相較 wordpress 則是有更大的彈性做事。

目前在 Macbook M1 和 MacPorts 環境下，操作一下，先弄個 Laravel project 出來：

```
% sudo port install php83 php83-iconv php83-intl php83-mbstring php83-openssl php83-curl php83-sqlite php83-zip php83-gd php83-exif
% alias php=php83
% wget https://getcomposer.org/download/latest-stable/composer.phar -O /tmp/composer.phar
% php /tmp/composer.phar self-update
% alias composer="php /tmp/composer.phar"
% composer create-project --prefer-dist laravel/laravel /tmp/laravel-workspace
Creating a "laravel/laravel" project at "/tmp/laravel-workspace"
Installing laravel/laravel (v11.1.4)
  - Installing laravel/laravel (v11.1.4): Extracting archive
Created project in /tmp/laravel-workspace
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
...
```
這邊偷懶用 alias composer="php /tmp/composer.phar" ，後面會碰到類似的的錯誤訊息時，其實就是找不到 composer 指令：

```
   Symfony\Component\Process\Exception\ProcessStartFailedException 

  The command "'composer' 'dump-autoload'" failed.

Working directory: /private/tmp/laravel-workspace

Error: proc_open(): posix_spawn() failed: No such file or directory
```

因此可以把 /tmp/composer.phar 擺到 PATH 內會尋找指令的地方，或是人工再補個 composer dump-autoload 等等

```
% cp /tmp/composer.phar ~/.bin/composer
% chmod 755 ~/.bin/composer
```

接下來安裝 Twill Toolkit，整個流程其實參考 Twill 官網教學文即可：Building a simple page builder with Laravel Blade，在此僅記錄一下操作流程：

```
% cd /tmp/laravel-workspace
laravel-workspace % composer require area17/twill:"^3.0"
laravel-workspace % php artisan twill:install
...
Let's create a superadmin account!

 Enter an email:
 > user@example.com

 Enter a password:
 > 

 Confirm the password:
 > 

Your account has been created
All good!
```

接著安裝後台模組 Pages：

```
laravel-workspace % php artisan twill:make:module pages

 Do you need to use the block editor on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to translate content on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to generate slugs on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to attach images on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to attach files on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to manage the position of records on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to enable revisions on this module? [yes]:
  [0] no
  [1] yes
 > 

 Do you need to enable nesting on this module? [no]:
  [0] no
  [1] yes
 > 

 Do you also want to generate a model factory? [yes]:
  [0] no
  [1] yes
 > 

 Do you also want to generate a model seeder? [yes]:
  [0] no
  [1] yes
 > 

Migration created successfully! Add some fields!

   INFO  Factory [database/factories/PageFactory.php] created successfully.  

Models created successfully! Fill your fillables!
Repository created successfully! Control all the things!
Controller created successfully! Define your index/browser/form endpoints options!
Form request created successfully! Add some validation rules!

 Do you also want to generate the preview file? [yes]:
  [0] no
  [1] yes
 > 

   INFO  Seeder [database/seeders/PageSeeder.php] created successfully.  

The following snippet has been added to routes/twill.php:
-----
TwillRoutes::module('pages');
-----
To add a navigation entry add the following to your AppServiceProvider BOOT method.
-----
use A17\Twill\Facades\TwillNavigation;
use A17\Twill\View\Components\Navigation\NavigationLink;

public function boot()
{
    ...
    
    TwillNavigation::addLink(
        NavigationLink::make()->forModule('pages')
    );
}
-----
Do not forget to migrate your database after modifying the migrations.

Enjoy.
```

上述的意思是 routes/twill.php 已經增加好後台管理介面的 routing 規則：

```
% cat routes/twill.php 
<?php

use A17\Twill\Facades\TwillRoutes;

// Register Twill routes here eg.
// TwillRoutes::module('posts');

TwillRoutes::module('pages');
```

但是 app/Providers/AppServiceProvider.php 必須自己處理，調整成下方：

```
laravel-workspace % cat app/Providers/AppServiceProvider.php 
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use A17\Twill\Facades\TwillNavigation;
use A17\Twill\View\Components\Navigation\NavigationLink;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        TwillNavigation::addLink(
            NavigationLink::make()->forModule('pages')
        );
    }
}
```

這些更動是讓後台 /admin 時，上方導覽可以多一項 Pages 的功能，後續透過下方來使用:

laravel-workspace % php artisan migrate
laravel-workspace % php artisan serve --host 0.0.0.0 --port 8000

如此，就可以用 http://localhost:8000/admin 登入後台，點擊 Pages 切換到 http://localhost:8000/admin/pages 可以新增 Pages ，可點擊 Add new 按鈕一則，這時可以看到前台網址規則是 localhost/en/pages/hello-world ，但實際上在 PHP Laravel routing 規則中，前台網址規則都還沒實作處理，所以是看不到資料的。


上述僅做了簡易的後台搭建，後續要處理的有：
  1. 讓後來編輯界面更加豐富，例如有更多的元件(image, text)等，主要是擴增編輯使用的表單元素
  2. 處理後台編輯時，preview 缺少的 css 資源 (運行 npm install && npm run build)
  3. 建立新元素的樣板資料
  4. 建立前台網頁的網址規則跟處理的 Controller (PageDisplayController)
如此，在後台把頁面發布出去後，就可以在前台被瀏覽到。但光上述四點的操作項目是不少的。

接著來進行，也就是 Twill 官網導覽流程，並且把其他碰到的問題也解一解：Configuring the page module

由於預設的前台網頁網址規則是跟語言相關的，例如建立個 Hello World Page 後，可以看到他的前台網址是 localhost/en/pages/hello-world ，若要去掉語言，就是調整 app/Http/Controllers/Twill/PageController.php ：

```
 18     protected function setUpController(): void
 19     {
 20         $this->setPermalinkBase('');          // 去掉 /pages/ 那層網址
 21         $this->withoutLanguageInPermalink();  // 去掉 /en/ 那層網址 
 22     }
```

接著來調整撰文時的表單功能，例如目前每一個 Page 都可以填寫 title 跟 description 可增加 SEO 的效果，而增加文章分享後的美觀，則是要增加圖片，這時直接修改 app/Http/Controllers/Twill/PageController.php ，添加發文時可以上傳圖片功能：

```
  6 use A17\Twill\Services\Forms\Fields\Medias;
...
 29     public function getForm(TwillModelContract $model): Form
 30     {   
 31         $form = parent::getForm($model);
 32         
 33         $form->add(
 34             Input::make()->name('description')->label('Description')->translatable()
 35         );
 36         
 37         $form->add(
 38             Medias::make()->name('cover')->label('Cover image')
 39         );
 40         
 41         return $form;
 42     }
...
```

主要是新增引入 `use A17\Twill\Services\Forms\Fields\Medias;` 跟 `$form->add( Medias::make()->name('cover')->label('Cover image') );`


這時我們的 laravel 是透過 artisan 跑在 8000 port，拖拉上傳圖片時，其實會顯示不出來


因為他的圖片網址規則並沒有帶 port ，且只要把網址複製出來加上 port number 就可以正常顯示，代表只需處理 Laravel framework 的 .env 中 APP_URL 規則：

```
% cat .env | grep APP_URL
APP_URL=http://localhost
```

這時建議測試時可以有兩套環境設置，運行時指定設定檔案：

```
% cp .env .env.local
% cat .env.local | grep APP_URL 
APP_URL=http://localhost:8000
% php artisan serve --host 0.0.0.0 --port 8000 --env local

   INFO  Server running on [http://0.0.0.0:8000].  

  Press Ctrl+C to stop the server
```

如此也解掉後台圖片顯示失敗的問題。


下一刻則是擴充文章編輯環境，引入 Block Editor 架構，也就是在編輯文章時，可以拖拉區塊到文章內，還可以自行開發，把常用的項目元件化。從 Twill 官網的範例資訊，預設有兩個 Block 了，一個是 image block ，另一個是 wysiwyg block，官網範例會試著新增一個小的區塊，例如名為 Text 的區塊。

首先，先啟用 Block Editor，啟用方式是在 app/Http/Controllers/Twill/PageController.php 裡引入 `use A17\Twill\Services\Forms\Fields\BlockEditor;` 和增加 `$form->add( BlockEditor::make() );`

接著則是試著建立一個 text block：

```
laravel-workspace % php artisan twill:make:block text

 Should we also generate a view file for rendering the block? (yes/no) [no]:
 > yes

Creating block...
File: /private/tmp/laravel-workspace/resources/views/twill/blocks/text.blade.php
Block text was created.
Block text blank render view was created.
Block is ready to use with the name 'text'

laravel-workspace % cat resources/views/twill/blocks/text.blade.php
@twillBlockTitle('Text')
@twillBlockIcon('text')
@twillBlockGroup('app')

<x-twill::input
    name="title"
    label="Title"
    :translated="true"
/>

<x-twill::wysiwyg
    name="text"
    label="Text"
    placeholder="Text"
    :toolbar-options="[
        'bold',
        'italic',
        ['list' => 'bullet'],
        ['list' => 'ordered'],
        [ 'script' => 'super' ],
        [ 'script' => 'sub' ],
        'link',
        'clean'
    ]"
    :translated="true"
/>
```

可以看到其樣板也長出來了


但是在後台 preview 時，仍會有待處理的訊息：

This is a basic preview. You can use dd($block) to view the data you have access to. <br />This preview file is located at: /private/tmp/laravel-workspace/resources/views/site/blocks/text.blade.php

將他修改一下：

```
% cat resources/views/site/blocks/text.blade.php
<div class="prose">
    <h2>{{$block->translatedInput('title')}}</h2>
    {!! $block->translatedInput('text') !!}
</div>
```    


接著再產生另一個 image block 並更新他的 block view 跟 preview:

```
laravel-workspace % php artisan twill:make:block image

 Should we also generate a view file for rendering the block? (yes/no) [no]:
 > yes

Creating block...
File: /private/tmp/laravel-workspace/resources/views/twill/blocks/image.blade.php
Block image was created.
Block image blank render view was created.
Block is ready to use with the name 'image'

laravel-workspace % cat resources/views/twill/blocks/image.blade.php
@twillBlockTitle('Image')
@twillBlockIcon('text')
@twillBlockGroup('app')
 
<x-twill::medias
    name="highlight"
    label="Highlight"
/>

laravel-workspace % cat resources/views/site/blocks/image.blade.php 
<div class="py-8 mx-auto max-w-2xl flex items-center">
    <img src="{{$block->image('highlight', 'desktop')}}"/>
</div>
```

此外，image block 要生效還需要調整 config/twill.php

```
% cat config/twill.php 
<?php

return [
    'block_editor' => [
        'crops' => [ 
            'highlight' => [
                'desktop' => [
                    [
                        'name' => 'desktop',
                        'ratio' => 16 / 9,
                    ],
                ],
                'mobile' => [
                    [
                        'name' => 'mobile',
                        'ratio' => 1,
                    ],
                ],
            ],
        ],
    ],
];
```

接著，還要幫前後台產的文章添加 CSS 效果 `@vite('resources/css/app.css')` ，添加方式是修改 `resources/views/site/layouts/block.blade.php` 跟 `resources/views/site/page.blade.php`

```
laravel-workspace % cat resources/views/site/layouts/block.blade.php 
<!doctype html>
<html lang="en">
<head>
    <title>#madewithtwill website</title>
    @vite('resources/css/app.css') 
</head>
<body>
<div>
    @yield('content')
</div>
</body>
</html>

laravel-workspace % cat resources/views/site/page.blade.php
<!doctype html>
<html lang="en">
<head>
    <title>{{ $item->title }}</title>
    @vite('resources/css/app.css') 
</head>
<body>
<div class="mx-auto max-w-2xl">
    {!! $item->renderBlocks() !!}
</div>
</body>
</html>
```

此外，還要用 npm 工具編譯出 resources/css/app.css：

```
% nvm use v20
Now using node v20.9.0 (npm v10.3.0)

% npm install        

added 23 packages, and audited 24 packages in 577ms

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

laravel-workspace % tree resources/css/       
resources/css/
└── app.css

1 directory, 1 file
```

如此，在 Twill 後台編輯文章時，就可以在 Block editor 操作下增加文字區塊、圖片等等的功能。

不過，直到現在前台機制還沒打通，尚未提供前台 routing rule 等顯示前台網頁，先建立個 PageDisplayController 來處理：

```
% php artisan make:controller PageDisplayController

   INFO  Controller [app/Http/Controllers/PageDisplayController.php] created successfully.  
```

把 PageDisplayController 更新為可以接一個參數，並且立刻把它印出 debug 訊息：

```
% cat app/Http/Controllers/PageDisplayController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Contracts\View\View;

class PageDisplayController extends Controller
{
    public function show(string $slug): View
    {
        dd($slug);
    }
}
```

接著，再把 routing 設置好：

```
% cat routes/web.php 
<?php

use Illuminate\Support\Facades\Route;

//Route::get('/', function () {
//    return view('welcome');
//});

Route::get('{slug}', [\App\Http\Controllers\PageDisplayController::class, 'show'])->name('frontend.page'); 
```

如此在前台瀏覽網頁就會看到：

最後，再把 PageDisplayController 調整成顯示正確的資料：

```
laravel-workspace % cat app/Http/Controllers/PageDisplayController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Contracts\View\View;
use App\Repositories\PageRepository;

class PageDisplayController extends Controller
{
    //public function show(string $slug): View
    //{
    //    dd($slug);
    //}

    public function show(string $slug, PageRepository $pageRepository): View
    {
        $page = $pageRepository->forSlug($slug);
 
        if (!$page) {
            abort(404);
        }
 
        return view('site.page', ['item' => $page]);
    }
}
```

如此瀏覽前台時，例如 http://localhost:8000/hello-world 就可以顯示網頁內容了。

最後，如果碰到前台圖片沒有顯示出來的部分，則是留意拖拉建立圖片時，需要依照不同裝置版型做設定，例如 PC 瀏覽時看不到圖片，那應當是少設定的 desktop 的設置：

```
laravel-workspace % cat resources/views/site/blocks/image.blade.php
<div class="py-8 mx-auto max-w-2xl flex items-center">
    <img src="{{$block->image('highlight', 'desktop')}}"/>
</div>
```

需留意在 block editor 時，其 Image 拖拉進去時，有沒有 `desktop crop` 的描述
張貼者： 於 沒有留言:
標籤： , , , , , , , ,

2024年8月2日 星期五

Node.js 開發筆記 - 分別透過 Pyodide, Brython, WebAssembly 在 node.js 呼叫 Python Code @ node.js v20, python3.11

一時興起研究一下 node.js 呼叫 python code 的方式，當然，都在 linux server 可以直接用 child_process 直接呼叫 python 去運行，例如 nodejs.org/api/child_process.html 的範例

```
const { spawn } = require('node:child_process');
const ls = spawn('ls', ['-lh', '/usr']);

ls.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

ls.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});

ls.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
}); 
```

然而，有沒有可能在 node.js 內，直接做 python 直譯的過程等方式？當個樂子，找了一下，還真的有，這樣搞的優勢是降低環境部署的變因，當然，效率上不見得是好辦法，但可以讓不同語言的開發者進行融合(誤)，目前看到兩種整合方式：
其中 Brython 屬於設計在 Web Browser 下運行（需要 DOM 資源），而 Pyodide 則不需要。分別筆記一下用法。

首先是要執行的 python code 內有 python 的 re 跟 json 模組的使用：

```
% cat script.py 
import re
import json

def runTest(inputData):
    output = {}
    flags = 0
    pattern = r'''(?x)
      (?:
        \.get\("n"\)\)&&\(b=|
        (?:
          b=String\.fromCharCode\(110\)|
          (?P<str_idx>[a-zA-Z0-9_$.]+)&&\(b="nn"\[\+(?P=str_idx)\]
        ),c=a\.get\(b\)\)&&\(c=|
        \b(?P<var>[a-zA-Z0-9_$]+)=
      )(?P<nfunc>[a-zA-Z0-9_$]+)(?:\[(?P<idx>\d+)\])?\([a-zA-Z]\)
      (?(var),[a-zA-Z0-9_$]+\.set\("n"\,(?P=var)\),(?P=nfunc)\.length)'''

    try:
        result = re.search(pattern, inputData, flags)
        if result:
            output["status"] = True
            output["data"] = result.groupdict()
    except Exception as e:
        output["error"] = str(e)
    return json.dumps(output, indent=4)

runTest(data)
```

Pyodide 用法：

```
% nvm use v20
Now using node v20.10.0 (npm v10.2.3)
% npm install pyodide
% cat package.json 
{
  "dependencies": {
    "pyodide": "^0.26.2"
  }
}

% cat run.js
const fs = require('fs').promises;
const { loadPyodide } = require("pyodide");

async function main() {
  const fileContent = await fs.readFile('mydata.bin', 'utf8');
  let pyodide = await loadPyodide();
  pyodide.globals.set("data", pyodide.toPy(fileContent));
  const pythonCode = await fs.readFile('script.py', 'utf8');
  let result = pyodide.runPython(pythonCode);
  console.log(result);
}

main();

% echo "Hello World" > mydata.bin

% node run.js
{}
```

上述使用過程算直觀，但偷懶把要傳遞的資料設定在全域變數，在用 node.js 環境接住 python 運算的結果，看來這個效果是很 OK ，有正常運行得到期待的結果。

接著研究 Brython 用法，他設計上需要 Browser 環境做事:

% head -n 9 brython.js
// brython.js brython.info
// version [3, 11, 0, 'final', 0]
// implementation [3, 11, 3, 'dev', 0]
// version compiled from commented, indented source files at
// github.com/brython-dev/brython
var __BRYTHON__=__BRYTHON__ ||{}
try{
eval("async function* f(){}")}catch(err){console.warn("Your browser is not fully supported. If you are using "+
"Microsoft Edge, please upgrade to the latest version")}

在 node.js 需要 jsdom 模擬一些環境，而下載 brython.js 和 brython_stdlib.js 則參考官網文件，透過 pip install brython 工具出來使用，所以這邊的流程會多了 python 工具的安裝，且現況用 python 3.12 會顯示有些問題，就先定在 3.11 版。此外 brython.js 運行環境，也是可以用最新版 node.js v22 ，但是會看到 [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. 訊息，所以先退到 node.js v20 避免額外的訊息

連續動作：

```
% python3.11 -m venv venv
% source venv/bin/activate
(venv) % pip install brython
Collecting brython
  Using cached brython-3.11.3-py3-none-any.whl.metadata (1.0 kB)
Using cached brython-3.11.3-py3-none-any.whl (1.6 MB)
Installing collected packages: brython
Successfully installed brython
(venv) % brython-cli install
Installing Brython 3.11.3
done
(venv) % ls
README.txt brython_stdlib.js index.html venv
brython.js demo.html unicode.txt
```

接著回到 node.js 主場：

```
% nvm use v20
Now using node v20.10.0 (npm v10.2.3)
% cat package.json 
{
  "dependencies": {
    "jsdom": "^24.1.1"
  }
}
% cat run-via-dom.js 
const { JSDOM } = require('jsdom');
const fs = require('fs');
const path = require('path');

const dom = new JSDOM(`<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script></script>
    </body>
</html>`, {
    runScripts: "dangerously", 
    resources: "usable"
});

const brythonJsPath = path.join(__dirname, 'brython.js');
const brythonStdlibJsPath = path.join(__dirname, 'brython_stdlib.js');

const brythonJs = fs.readFileSync(brythonJsPath, 'utf8');
const brythonStdlibJs = fs.readFileSync(brythonStdlibJsPath, 'utf8');

try {
    dom.window.eval(brythonJs);
    dom.window.eval(brythonStdlibJs);
} catch (error) {
    console.error('Error executing brython.js:', error);
}

const scriptPath = path.join(__dirname, 'script.py');
const pythonScript = fs.readFileSync(scriptPath, 'utf8');

const dataPath = path.join(__dirname, 'mydata.bin');
const binaryData = fs.readFileSync(dataPath, 'utf8');
const base64Data = Buffer.from(binaryData).toString('base64');

const scriptElement = dom.window.document.createElement('script');
scriptElement.type = 'text/python';
scriptElement.textContent = `
import base64
data = base64.b64decode("""${base64Data}""")

${pythonScript}

from browser import document
document.output = runTest(data)
`
dom.window.document.body.appendChild(scriptElement);
try {
    dom.window.brython({debug: 1, pythonpath: ['.']})
    console.log(dom.window.document.output);
} catch (error) {
    console.error('Error executing dom.window.brython:', error);
}
console.log('Python script execution completed.');

% echo "Hello World" > mydata.bin

% node run-via-dom.js 
{"status": false, "data": {}, "error": "not the same type for string and pattern"}
Python script execution completed.
```

很可惜的，剛好要實驗複雜的 python regular expression，在 brython.js + node.js v20 + jsdom 環境上失敗了，甚至小改 index.html 搭配 python3 -m http.server 用 Chrome browser 執行（給予他完整的 Chrome 瀏覽器環境）還是有一樣的錯誤訊息，這邊就暫時推論失敗了，而上述的範例已經包括從 node.js 傳資料到 python code ，以及運行完如何把回傳資料傳到 node.js 使用，眼尖的人，應該會發現在 brython 用法內，使用了 `document.output = runTest(data)` ，其實是多呼叫了一次 runTest(data)，因為原先 `${pythonScript}` 也有做，但沒在細追怎樣接運算結果，剛好不合預期就放棄研究。

最後，就是 WebAssembly 領域(一開始寫這篇筆記就是要研究 WebAssembly ，不小心走偏)，把某一種 python code 轉成 wasm 格式，接著用 wasmer 運行，或是在其他語言(如 node.js)運行 wasm code。

先透過 MacPorts 安裝 wasmer:

% port search wasmer
wasmer @4.3.5 (lang, devel)
    The leading WebAssembly Runtime supporting WASI and Emscripten
% sudo port install wasmer

接著試著用 py2wasm 把 script-main.py 轉成 script-main.wasm，其中 py2wasm 官網有提到目前僅支援 python3.11:

% python3.11 -m venv venv
% source venv/bin/activate
(venv) % pip install py2wasm
(venv) % py2wasm script-main.py -o script-main.wasm

程式碼：

```
% cat script-main.py
import re
import json

def runTest(inputData):
    output = { "status": False, "data": {}, "error": None}
    flags = 0
    pattern = r'''(?x)
      (?:
        \.get\("n"\)\)&&\(b=|
        (?:
          b=String\.fromCharCode\(110\)|
          (?P<str_idx>[a-zA-Z0-9_$.]+)&&\(b="nn"\[\+(?P=str_idx)\]
        ),c=a\.get\(b\)\)&&\(c=|
        \b(?P<var>[a-zA-Z0-9_$]+)=
      )(?P<nfunc>[a-zA-Z0-9_$]+)(?:\[(?P<idx>\d+)\])?\([a-zA-Z]\)
      (?(var),[a-zA-Z0-9_$]+\.set\("n"\,(?P=var)\),(?P=nfunc)\.length)'''

    try:
        result = re.search(pattern, inputData, flags)
        if result:
            output["status"] = True
            output["data"] = result.groupdict()
    except Exception as e:
        output["error"] = str(e)
    return json.dumps(output, indent=4)

if __name__ == "__main__":
    import sys
    if len(sys.argv) < 2:
        print("Usage: python script-main.py <inputData>")
    else:
        print(runTest(sys.argv[1]))

% python3 script-main.py 
Usage: python script-main.py <inputData>

% python3 script-main.py "Hello World"
{
    "status": false,
    "data": {},
    "error": null
}
```

wasmer 實測：

```
% wasmer run script-main.wasm 
Usage: python script-main.py <inputData>

% wasmer run script-main.wasm "Hello World"
{
    "status": false,
    "data": {},
    "error": null
}
```

接著讓 Node.JS 來運行，這邊就來煩 ChatGPT 並小改一下，有了一個比較堪用的版本：

```
% cat run.js 
const fs = require('fs');
const { WASI } = require('wasi');
const path = require('path');
const { TextDecoder } = require('util');

const runWasm = async (inputData) => {
    const wasmPath = path.resolve('./script-main.wasm');
    const wasmBinary = fs.readFileSync(wasmPath);

    // Setup a WASI instance
    const wasi = new WASI({
        args: inputData ? ['script-main.wasm', inputData] : ['script-main.wasm'],
        env: {},
        version: 'preview1'
    });

    // Create a memory buffer for the stdout
    const memory = new WebAssembly.Memory({ initial: 1 });

    // Compile and instantiate the WebAssembly module
    const { instance } = await WebAssembly.instantiate(wasmBinary, {
        wasi_snapshot_preview1: wasi.wasiImport,
        env: { memory }
    });

    // Start the WASI instance
    wasi.start(instance);

    // Read and decode the stdout data
    const stdout = new Uint8Array(memory.buffer);
    const decoder = new TextDecoder('utf8');
    const output = decoder.decode(stdout);
    console.log(output.trim());
};

// Get the inputData from the command line arguments
runWasm(process.argv[2] || null).catch(console.error);

% nvm use v20
Now using node v20.10.0 (npm v10.2.3)

% node run.js 
(node:22046) ExperimentalWarning: WASI is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Usage: python script-main.py <inputData>

% node run.js "Hello World"
(node:22050) ExperimentalWarning: WASI is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
{
    "status": false,
    "data": {},
    "error": null
}
```

回過頭來，故事起源是想善用一些 open source 甚至不同程式語言的整合架構，因此稍微研究一些跨語言的整合，很可惜的，最佳的路線應當還是各自跑在各自的 runtime 環境，以上就當趣味筆記一下。
張貼者： 於 沒有留言:
標籤： , , , , , , , , , , ,

2024年7月25日 星期四

AI 開發筆記 - 透過 llama.cpp 使用 Meta Llama 3.1 8B，過程包括資料格式轉換 @ MacBook Pro M1 32GB RAM



首先，下載 Meta llama3.1 8B 方式都寫在網站上，先到 llama.meta.com/llama-downloads 填單，填完單就會顯示下載網址，例如這種格式：

https://llama3-1.llamameta.net/*?Policy=XXX&Key-Pair-Id=XXX&Download-Request-ID=XXX

然後下載方式不是直接瀏覽他，要依照指定方式，透過 download.sh 下載，下載資訊：


連續動作：

```
% git clone https://github.com/meta-llama/llama-models
% bash llama-models/models/llama3_1/download.sh
Enter the URL from email:  https://llama3-1.llamameta.net/*?Policy=XXX&Key-Pair-Id=XXX&Download-Request-ID=XXX

 **** Model list ***
 -  meta-llama-3.1-405b
 -  meta-llama-3.1-70b
 -  meta-llama-3.1-8b
 -  meta-llama-guard-3-8b
 -  prompt-guard
Choose the model to download: meta-llama-3.1-8b

**** Available models to download: *** 
 -  meta-llama-3.1-8b-instruct
 -  meta-llama-3.1-8b

Enter the list of models to download without spaces or press Enter for all: meta-llama-3.1-8b
Downloading LICENSE and Acceptable Usage Policy
...
```

資料量大小：

```
% du -hd1 Meta-Llama-3.1-8B 
 15G    Meta-Llama-3.1-8B

% tree Meta-Llama-3.1-8B 
Meta-Llama-3.1-8B
├── consolidated.00.pth
├── params.json
└── tokenizer.model

1 directory, 3 files
```

接著就可以享受 Meta 釋出給全世界的 AI 模型了，萬分感謝 Orz 省去自己掏錢買機器訓練，據說這版 llama3.1 號稱可以跟 ChatGPT-4o 或 Claude 3.5 Sonnet 抗衡。但基於家裡的算力不足，純試試 8B 吧！

接下來使用 llama.cpp 體驗，除了程式碼編譯外，還要做資料格式的轉換：

```
% wget https://raw.githubusercontent.com/huggingface/transformers/main/src/transformers/models/llama/convert_llama_weights_to_hf.py
% python3 -m venv venv
% source venv/bin/activate
(venv) % pip install transformers torch huggingface_hub tiktoken blobfile accelerate
(venv) % python3 convert_llama_weights_to_hf.py --input_dir Meta-Llama-3.1-8B --model_size 8B --output_dir llama3_1_hf --llama_version 3.1

(venv) % du -hd1 llama3_1_hf
 15G    llama3_1_hf
(venv) % tree llama3_1_hf
llama3_1_hf
├── config.json
├── generation_config.json
├── model-00001-of-00004.safetensors
├── model-00002-of-00004.safetensors
├── model-00003-of-00004.safetensors
├── model-00004-of-00004.safetensors
├── model.safetensors.index.json
├── special_tokens_map.json
├── tokenizer.json
└── tokenizer_config.json

1 directory, 10 files
```

編譯及使用 llama.cpp：

```
(venv) % git clone https://github.com/ggerganov/llama.cpp
(venv) % cd llama.cpp
(venv) llama.cpp % LLAMA_METAL=1 make  
(venv) llama.cpp % pip install -r requirements.txt
(venv) llama.cpp % time python3 convert_hf_to_gguf.py ../llama3_1_hf/ --outfile llama3_1-8B.gguf
(venv) llama.cpp % 
(venv) llama.cpp % du -hd1 llama3_1-8B.gguf
 15G    llama3_1-8B.gguf
(venv) llama.cpp % ./llama-server -m ./llama3_1-8B.gguf
...
error: Insufficient Memory (00000008:kIOGPUCommandBufferCallbackErrorOutOfMemory)
...
llama_new_context_with_model: n_ctx      = 131072
llama_new_context_with_model: n_batch    = 2048
llama_new_context_with_model: n_ubatch   = 512
llama_new_context_with_model: flash_attn = 0
llama_new_context_with_model: freq_base  = 500000.0
llama_new_context_with_model: freq_scale = 1
ggml_metal_init: allocating
ggml_metal_init: found device: Apple M1 Pro
ggml_metal_init: picking default device: Apple M1 Pro
ggml_metal_init: using embedded metal library
ggml_metal_init: GPU name:   Apple M1 Pro
ggml_metal_init: GPU family: MTLGPUFamilyApple7  (1007)
ggml_metal_init: GPU family: MTLGPUFamilyCommon3 (3003)
ggml_metal_init: GPU family: MTLGPUFamilyMetal3  (5001)
ggml_metal_init: simdgroup reduction support   = true
ggml_metal_init: simdgroup matrix mul. support = true
ggml_metal_init: hasUnifiedMemory              = true
ggml_metal_init: recommendedMaxWorkingSetSize  = 22906.50 MB
llama_kv_cache_init:      Metal KV buffer size = 16384.00 MiB
llama_new_context_with_model: KV self size  = 16384.00 MiB, K (f16): 8192.00 MiB, V (f16): 8192.00 MiB
llama_new_context_with_model:        CPU  output buffer size =     0.98 MiB
llama_new_context_with_model:      Metal compute buffer size =  8480.00 MiB
llama_new_context_with_model:        CPU compute buffer size =   264.01 MiB
llama_new_context_with_model: graph nodes  = 1030
llama_new_context_with_model: graph splits = 2
...
^Cggml_metal_free: deallocating
```

預設環境會碰到 Aplpe MacBook Pro 筆電資源的限制，多使用了 -c 31072 來跑，整個 llama-server 在 macOS 活動監視器上，可以看到使用記憶體不到 4GB，看起來有穩定下來：

```
(venv) llama.cpp % ./llama-server -m ./llama3_1-8B.gguf -c 31072
...
.........................................................................................
llama_new_context_with_model: n_ctx      = 31072
llama_new_context_with_model: n_batch    = 2048
llama_new_context_with_model: n_ubatch   = 512
llama_new_context_with_model: flash_attn = 0
llama_new_context_with_model: freq_base  = 500000.0
llama_new_context_with_model: freq_scale = 1
ggml_metal_init: allocating
ggml_metal_init: found device: Apple M1 Pro
ggml_metal_init: picking default device: Apple M1 Pro
ggml_metal_init: using embedded metal library
ggml_metal_init: GPU name:   Apple M1 Pro
ggml_metal_init: GPU family: MTLGPUFamilyApple7  (1007)
ggml_metal_init: GPU family: MTLGPUFamilyCommon3 (3003)
ggml_metal_init: GPU family: MTLGPUFamilyMetal3  (5001)
ggml_metal_init: simdgroup reduction support   = true
ggml_metal_init: simdgroup matrix mul. support = true
ggml_metal_init: hasUnifiedMemory              = true
ggml_metal_init: recommendedMaxWorkingSetSize  = 22906.50 MB
llama_kv_cache_init:      Metal KV buffer size =  3884.00 MiB
llama_new_context_with_model: KV self size  = 3884.00 MiB, K (f16): 1942.00 MiB, V (f16): 1942.00 MiB
llama_new_context_with_model:        CPU  output buffer size =     0.98 MiB
llama_new_context_with_model:      Metal compute buffer size =  2034.69 MiB
llama_new_context_with_model:        CPU compute buffer size =    68.69 MiB
llama_new_context_with_model: graph nodes  = 1030
llama_new_context_with_model: graph splits = 2

INFO [                    init] initializing slots | tid="0x1f3b34c00" timestamp=1721895109 n_slots=1
INFO [                    init] new slot | tid="0x1f3b34c00" timestamp=1721895109 id_slot=0 n_ctx_slot=31072
INFO [                    main] model loaded | tid="0x1f3b34c00" timestamp=1721895109
INFO [                    main] chat template | tid="0x1f3b34c00" timestamp=1721895109 chat_example="<|im_start|>system\nYou are a helpful assistant<|im_end|>\n<|im_start|>user\nHello<|im_end|>\n<|im_start|>assistant\nHi there<|im_end|>\n<|im_start|>user\nHow are you?<|im_end|>\n<|im_start|>assistant\n" built_in=true
INFO [                    main] HTTP server listening | tid="0x1f3b34c00" timestamp=1721895109 port="8080" n_threads_http="9" hostname="127.0.0.1"
INFO [            update_slots] all slots are idle | tid="0x1f3b34c00" timestamp=1721895109
...
```

如此就可以用 http://localhost:8080 來體驗 llama3.1 8B 的資料了

張貼者： 於 沒有留言:
標籤： , , , , , , , , , , ,

2024年7月18日 星期四

PHP 開發筆記 - 研究 osTicket plugins 架構，以一個可擴充前端資源 plugin 為例


之前團隊在擴充 osTicket 時，主要是下海改他的 code ，但 osTicket 本身也有 plugin 架構，就花點時間看一下資料，感覺比想像中少資料可以看，只好直接看官方的 code 猜有什麼架構可用。

資料:
差不多了，然後看一下這幾個實作，盡量找最簡單的
剛好團隊內以前也都有開發過 oauth, ldap 整合，所以快速掃一下就可以很快摸索出個大概，重要的資訊: 
  • plugin 主要由 3 個檔案組成，分別是 plugin.php, config.php, yourclass.php
  • plugin 要儲存一些設定值，只需 config.php 內提供 function getAllOptions() {} 就可以輕鬆達成
  • plugin 可以自己再創個 db table 來儲存資料，一樣嘢是在 config.php 中伺機創結構
  • plugin 安插自己的程式碼主要是依賴 Signals API 架構很漂亮，但現有 Signals API 的入口點並沒有太多 UI 擴充點
  • plugin 可以製作額外的 API ，請參考 audit plugin 內的實作片段

就這樣，可以摸索個大概：

```
osTicket % grep -r "Signal::" * | grep -o 'Signal::[^,]*' | sort | uniq
Signal::connect('api'
Signal::connect('auth.clean'
Signal::connect('cron'
Signal::connect('model.created'
Signal::connect('model.deleted'
Signal::connect('model.updated'
Signal::connect('object.deleted'
Signal::connect('organization.created'
Signal::connect('session.close'
Signal::connect('signal.name'
Signal::connect('staff.header.extra'
Signal::connect('system.install'
Signal::connect('threadentry.created'
Signal::connect('ticket.created'
Signal::connect('user.auth'
Signal::connect('user.created'
Signal::connect() function call
Signal::connect\('([^']+)'/m"
Signal::send($action
Signal::send('agent.audit'
Signal::send('agenttab.audit'
Signal::send('ajax.client'
Signal::send('ajax.scp'
Signal::send('api'
Signal::send('apps.admin'
Signal::send('apps.scp'
Signal::send('auth.clean'
Signal::send('auth.login.failed'
Signal::send('auth.login.succeeded'
Signal::send('auth.logout'
Signal::send('auth.pwchange'
Signal::send('auth.pwreset.email'
Signal::send('auth.pwreset.login'
Signal::send('config.ttfonts'
Signal::send('cron'
Signal::send('export.tables'
Signal::send('mail.decoded'
Signal::send('mail.received'
Signal::send('model.created'
Signal::send('model.deleted'
Signal::send('model.updated'
Signal::send('object.created'
Signal::send('object.deleted'
Signal::send('object.edited'
Signal::send('object.view'
Signal::send('organization.created'
Signal::send('person.login'
Signal::send('person.logout'
Signal::send('session.close'
Signal::send('signal.name'
Signal::send('syslog'
Signal::send('system.install'
Signal::send('task.created'
Signal::send('threadentry.created'
Signal::send('ticket.create.before'
Signal::send('ticket.create.validated'
Signal::send('ticket.created'
Signal::send('ticket.view.more'
Signal::send('user.audit'
Signal::send('user.created'
Signal::send('user.login'
Signal::send('usertab.audit'
Signal::send() for the same named signal.
Signal::send() for the same-named signal.
Signal::send\('([^']+)'/m"
```

以及弄出個簡單的 osTicket plugin 來記錄一下：

搭配 osTicket 程式碼變動： 

% cat -n osTicket/include/staff/header.inc.php | head -n 64 | tail -n 10

    55     <link rel="icon" type="image/png" href="<?php echo ROOT_PATH ?>images/oscar-favicon-16x16.png" sizes="16x16" />

    56

    57     <?php

    58     Signal::send('staff.header.extra');

    59     if($ost && ($headers=$ost->getExtraHeaders())) {

    60         echo "\n\t".implode("\n\t", $headers)."\n";

    61     }

    62     ?>

    63 </head>


此 plugin 目的是提供引入更多 js, css resources，但如同上述提到的 osTicket plugin 沒有提供太多前端插入的 Signals ，自己得多添加一個 `Signal::send('staff.header.extra', null);` ，再來提 feature requests 來詢問開發團隊，看看是不是自己誤會了

張貼者： 於 沒有留言:
標籤： , ,

2024年7月16日 星期二

SanDisk RMA 海外送修體驗 - Dual Drive Go USB Type-C 512GB


之前買 SanDisk USB 隨身碟覺得很小，十分適合隨身攜帶。想到之前 Macbook 蓋上後無法開機而送修的經驗，隨時加密備份資料到 USB 隨身碟，變成每週想到就會做一下事，雖然 iCloud 付費甚至免費的空間也夠用，但我也曾經歷過 iCloud 同步失敗事件 Orz 最終還是自己弄一套本地備份的機制吧！

不知是不是太常備份？在 macos 系統中，如果資料搬移的過程沒有正常走完時，隨身碟很容易進入異常狀態，接著 macOS 無法辨識。這時把它插進 Windows 系統，Windows 會偵測該隨身碟狀態，如果發現異常時會詢問是否嘗試修復，滿高的機率會修復成功的。然後，這一次沒那麼好運，連 Windows 也辨識不出，直接顯示有問題 Orz 


在完全辨識不出之前，其實也有徵兆，發現幾十GB的單一大檔案資料複製失敗，接著就自己手賤拔掉它（沒有在 macOS 安心退出），然後在 Windows 11 環境上也顯示異常無法修復。就這樣開始體驗送修機制。

若隨身碟外觀一切良好，建議回顧一下當初買到時，封面還背面到底貼了哪一家代理商的貼紙，例如展碁國際等，但我的案例是已經不知道了，再加上隨身碟外觀有點損傷（可移動的蓋子壞了被我拔掉），就聯絡了 WD (2016收購SanDisk)，但起源發信給 support@SanDisk.com ，並提供當初在哪個地方購買的發票證明


這時客服也會先引導你是否要先找當地代理商換貨，最終我的案例是建立 RMA，並把商品使用掛號郵寄寄到香港檢測，若情況可以換新品，接著對方也會快遞把新品寄到指定的地點。使用者承擔掛號郵寄的費用，WD承擔寄送到使用者的快遞費用。

一個隨身碟掛號郵寄到香港，約80台幣，此外，收快遞進台灣還得處理 EZWay 報關，對方會申報商品價值，如 10 美金。

掛號郵寄到對方約四天，快遞收件也差不多四天，整體服務體驗很不錯。
張貼者： 於 沒有留言:
標籤： , , , , ,
訂閱： 文章 (Atom)