Tensorflow.jsの画像認識って

2024.03.11

Logging

おはようございます、Tensorflow.jsの画像認識ってドキュメント通り書いて上手く画像認識できますか？自分が試してみたら、どうも下記のエラーがでて上手く動作してくれなかったのでもしかしたらと思いバージョンをアップしたら動作してくれました。

Uncaught (in promise) Error: Tensorflow Op is not supported: _FusedConv2D

<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="cat.jpg"></img>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  // Notice there is no 'import' statement. 'mobilenet' and 'tf' is
  // available on the index-page because of the script tag above.

  const img = document.getElementById('img');

  // Load the model.
  mobilenet.load().then(model => {
    // Classify the image.
    model.classify(img).then(predictions => {
      console.log('Predictions: ');
      console.log(predictions);
    });
  });
</script>

因みに自分は画像投稿系のサイトで使用するために今回のTensorflow.jsを使用するのですが、よくよく調べているとファインチューニングが出来るようです。ファインチューニングとは一度学習したものに再学習を埋め込む手法といえば良いのかな？要するにカスタマイズしてある分類に特化させる手法のことを指します。今のところ学習済みのモデルで全然判定されるのでOKだと思うのですが、ユーザーさんから認識できないという不満の声が上がれば対応しないといけなくなりそうです。

明日へ続く。

タグ

'src', below, const img, Error, getElementById, gt, img, img&quot, Load TensorFlow.js, lt, MobileNet, mobilenet.load, model, predictions, quot, statement, then, Uncaught, ファインチューニング,

よんでんコンシェルジュの不具合について考える人。 #日別料金計算

2022.09.27

Logging

おはようございます。タイトルの不具合が解消されていたらゴメンナサイ。これは昨日に書いた記事です🤔。

夕方頃によんでんコンシェルジュの日別の電力と電力料金を見ようとした所、何やら不具合が発生していたらしく、合計金額が見えなくなっていたのでコードを書いてみました😌。

ざっくりとした金額合計が表示するような物ですので、実際の金額とは差異が発生します。ソースコードはこんな感じです。

let kwh =  document.querySelectorAll(".img_area > table > tbody > tr > td");
if(kwh){let s = 0;
    for(let i = 0;i < kwh.length ; i++){
        if(kwh[i].innerText.match(/(kWh)/)){
          s = s + (Number(String(kwh[i].innerText).replace("kWh",""))*100);
          console.log(kwh[i].innerText);
        }
    }
    let r = 0;
    s = Math.floor(s /100);
    if(s >11){
        if(s < 120){
            r = ((s -11) * 20) + 411;
        }
        if(s < 300){
            r = ((s - 120) * 27) + 411 + 2220;
        }
        if(s >= 300){
            r = ((s - 300) * 30) + 411 + 2220 + 4858;
        }
    }
    console.log("合計金額="  + String(s) + "kWh  " + String(r) + "円");
}

尚、消費電力が11kwh以下の人の金額は０円になっていますが、実際は料金が発生します。それにしても四国電力の料金内訳を見ていると何だか、モヤモヤする料金体系になっていて、これは面倒だなと感じました。こんな料金体系じゃなく一律のお値段にして欲しいですね・・・（消費電力によって値段が変動しますし…etc…）。

ソースコードの取り扱い：
上記のソースコードを四国電力（よんでんコンシェルジュ）の日別ページを開いた状態にして、ブラウザのコンソール画面にソースコードを貼り付けて実行してみてください。電力の合計金額などがコンソール画面に表示されます。

タグ

0, area, document, For, gt, if, img, innerText, kwh, length, let, lt, match, querySelectorAll, quot, TABLE, tbody, td, tr, コード, これ, コンシェルジュ, ソース, タイトル, よんでん, 不具合, 人, 合計, 夕方, 実際, 差異, 感じ, 所, 料金, 日別, 昨日, 物, 発生, 表示, 解消, 計算, 記事, 金額, 電力,

ajaxはクロスドメインを許していないのでこうするしかない？わけではないけれど（提供会社による）

2019.05.11

Logging

ライブドアが提供している天気予報APIをJSだけで
なんとか出来ないかと思ったので試してみたけれど無理でしたので、
一回、PHPで読み込んでその情報を取得するという事で解決。
昔はYahooがそういう事を提供してたみたいですが
提供終了してました。

<div style="display: table;">
        <div style="display: table-cell;">
            今日の天気::<br>
            <img id="weather_0" src="">
        </div>
        <div style="display: table-cell;">
            明日の天気<br>
            <img id="weather_1" src="">
        </div>
    </div>

<script>
$(function(){
    $.ajax({
        type: 'GET',
        //'http://weather.livedoor.com/forecast/webservice/json/v1?city=390010',
        url: 'https://zip358.com/weather/',
        data:null,
        dataType: 'json'
    }).done(function(data){
        $("#weather_0").attr("src",data.forecasts["0"].image.url);
        $("#weather_1").attr("src",data.forecasts["1"].image.url);
    });
});
</script>

タグ

'src', 0, ajax, API, br, display, div, gt, ID, img, JS, lt, php, style, TABLE, table-cell, weather, Yahoo, クロス, ドメイン, ライブドア, わけ, 一, 予報, 事, 今日, 取得, 天気, 情報, 提供, 明日, 昔, 終了, 解決,

Twitterの画像を抽出、非API

2018.11.07

Logging

Twitterの画像を抽出、非API
Goutteライブラリを使用してTwitterのメディアを抽出するだけで
APIを使用せずに17枚の画像が抽出することが可能。
これを改良してスクロールさせながらってのは出来ないのではないかな
特にVPSじゃないレンタルサーバーなどでは不可能じゃないのかと思います。

require_once './vendor/autoload.php';
use Goutte\Client;
$client = new Client();
$crawler = $client->request('GET','https://twitter.com/xxxx/media');
$img = $crawler->filter(".AdaptiveMedia-photoContainer.js-adaptive-photo img")->each(function ($node){
return $node->attr('src');
});

タグ

'src', 17, AdaptiveMedia-photoContainer, API, APITwitter, attr, autoload, Client, com, crawler, each, filter, function, GET, Goutte, gt, img, js-adaptive-photo, media', new, node, once, php, request, require, return, Twitter, use, vendor, VPS, xxxx, こと, これ, サーバー, スクロール, ない, メディア, ライブラリ, レンタル, 不可能, 使用, 出来, 可能, 思い, 抽出, 改良, 枚, 特に, 画像, 非,

たった数行のプログラムでドツボにはまる。

2018.04.14

Logging

<?php
$command = "ls -m img";
exec($command,$val,$chk);
//imglist
$imglist = explode(",",implode("",$val));
if(is_array($imglist)){
    foreach ($imglist as $key => $value) {
        $img64[$key] = base64_encode(file_get_contents("img/".trim($value)));
        $path_parts = pathinfo($value);
        $path_parts['extension']=="jpeg"?"jpg":$path_parts['extension'];
?>
<div><a href="./img/<?=trim($value)?>"><?=$value?></a><br><img src="data:image/<?=$path_parts['extension']?>;base64,<?=$img64[$key]?>"></div>
<?php
    }
}
$obj["imglist"] = implode("\n\n",$img64);

ls -m というコマンドをPHPのexecという関数を使用し
画像リストを取得しようとしてどつぼにハマった・・・。
この関数、exec(“ls -m”)と書くと$valの中に配列として返却されるのだが、複数の配列に別れて返却される。なので一度、implodeを使用して一度、文字列に戻す必要がある。そしてカンマ区切りで再度、文字列分離する。

これでほっと一息つくとアウトだ！
配列化した値の前後に空白部分が入っていたり改行コードが入っていたりして画像を参照することが出来ないのだ。そのため、trim関数を使用して取り除く必要がある。

コマンドを使用して画像をリスト化して参照するメリットは何かと言えば数百枚の画像を列挙するときなどに高速で参照化することが出来るのだ。因みにコマンドでファイルの検索を行うという事なので本領発揮すると思います。

是非、お試しあれ。

タグ

-Command, -m, ３, 39, 64, array, as, base, chk, contents, encode, exec, explode, extension, file, foreach, GET, gt, if, img, imglist, implode, is, jpeg, jpg, key, ls, lt, parts, path, pathinfo, php, quot, trim, val, value, ドツボ, プログラム, 数行,