├── test
├── test_helper.exs
├── yolo_web
│ ├── views
│ │ ├── layout_view_test.exs
│ │ ├── page_view_test.exs
│ │ └── error_view_test.exs
│ └── controllers
│ │ └── page_controller_test.exs
└── support
│ ├── channel_case.ex
│ └── conn_case.ex
├── python_scripts
├── requirements.txt
└── detect.py
├── kite.jpg
├── assets
├── .babelrc
├── static
│ ├── favicon.ico
│ ├── images
│ │ ├── phoenix.png
│ │ └── 1fps_object_detection.gif
│ └── robots.txt
├── css
│ ├── app.css
│ ├── webcam.css
│ └── phoenix.css
├── js
│ ├── socket.js
│ ├── app.js
│ ├── upload.js
│ └── webcam.js
├── package.json
└── webpack.config.js
├── lib
├── yolo_web
│ ├── views
│ │ ├── page_view.ex
│ │ ├── layout_view.ex
│ │ ├── upload_view.ex
│ │ ├── webcam_view.ex
│ │ ├── error_view.ex
│ │ └── error_helpers.ex
│ ├── controllers
│ │ ├── page_controller.ex
│ │ ├── webcam_controller.ex
│ │ └── upload_controller.ex
│ ├── templates
│ │ ├── webcam
│ │ │ └── index.html.eex
│ │ ├── upload
│ │ │ ├── new.html.eex
│ │ │ └── show.html.eex
│ │ ├── page
│ │ │ └── index.html.eex
│ │ └── layout
│ │ │ └── app.html.eex
│ ├── router.ex
│ ├── gettext.ex
│ ├── channels
│ │ ├── user_socket.ex
│ │ └── webcam_channel.ex
│ └── endpoint.ex
├── yolo.ex
├── yolo
│ ├── application.ex
│ └── worker.ex
└── yolo_web.ex
├── .formatter.exs
├── config
├── test.exs
├── prod.secret.exs
├── config.exs
├── prod.exs
└── dev.exs
├── priv
└── gettext
│ ├── en
│ └── LC_MESSAGES
│ │ └── errors.po
│ └── errors.pot
├── .gitignore
├── mix.exs
├── README.md
└── mix.lock
/test/test_helper.exs:
--------------------------------------------------------------------------------
1 | ExUnit.start()
2 |
--------------------------------------------------------------------------------
/python_scripts/requirements.txt:
--------------------------------------------------------------------------------
1 | opencv-python
2 | tensorflow
3 | cvlib
--------------------------------------------------------------------------------
/kite.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poeticoding/yolo_example/HEAD/kite.jpg
--------------------------------------------------------------------------------
/assets/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/lib/yolo_web/views/page_view.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.PageView do
2 | use YoloWeb, :view
3 | end
4 |
--------------------------------------------------------------------------------
/lib/yolo_web/views/layout_view.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.LayoutView do
2 | use YoloWeb, :view
3 | end
4 |
--------------------------------------------------------------------------------
/lib/yolo_web/views/upload_view.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.UploadView do
2 | use YoloWeb, :view
3 | end
4 |
--------------------------------------------------------------------------------
/lib/yolo_web/views/webcam_view.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.WebcamView do
2 | use YoloWeb, :view
3 | end
4 |
--------------------------------------------------------------------------------
/assets/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poeticoding/yolo_example/HEAD/assets/static/favicon.ico
--------------------------------------------------------------------------------
/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 | import_deps: [:phoenix],
3 | inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"]
4 | ]
5 |
--------------------------------------------------------------------------------
/assets/static/images/phoenix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poeticoding/yolo_example/HEAD/assets/static/images/phoenix.png
--------------------------------------------------------------------------------
/test/yolo_web/views/layout_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.LayoutViewTest do
2 | use YoloWeb.ConnCase, async: true
3 | end
4 |
--------------------------------------------------------------------------------
/test/yolo_web/views/page_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.PageViewTest do
2 | use YoloWeb.ConnCase, async: true
3 | end
4 |
--------------------------------------------------------------------------------
/assets/css/app.css:
--------------------------------------------------------------------------------
1 | /* This file is for your main application css. */
2 |
3 | @import "./phoenix.css";
4 |
5 | @import "./webcam.css";
--------------------------------------------------------------------------------
/assets/static/images/1fps_object_detection.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poeticoding/yolo_example/HEAD/assets/static/images/1fps_object_detection.gif
--------------------------------------------------------------------------------
/lib/yolo_web/controllers/page_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.PageController do
2 | use YoloWeb, :controller
3 |
4 | def index(conn, _params) do
5 | render(conn, "index.html")
6 | end
7 | end
8 |
--------------------------------------------------------------------------------
/lib/yolo_web/controllers/webcam_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.WebcamController do
2 | use YoloWeb, :controller
3 |
4 | def index(conn, _params) do
5 | render(conn, "index.html")
6 | end
7 |
8 | end
9 |
--------------------------------------------------------------------------------
/assets/static/robots.txt:
--------------------------------------------------------------------------------
1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
2 | #
3 | # To ban all spiders from the entire site uncomment the next two lines:
4 | # User-agent: *
5 | # Disallow: /
6 |
--------------------------------------------------------------------------------
/lib/yolo_web/templates/webcam/index.html.eex:
--------------------------------------------------------------------------------
1 | Start
2 |
6 |
7 |
--------------------------------------------------------------------------------
/lib/yolo_web/templates/upload/new.html.eex:
--------------------------------------------------------------------------------
1 | <%= form_for @conn, Routes.upload_path(@conn, :create), [multipart: true], fn f-> %>
2 | <%= file_input f, :upload, class: "form-control" %>
3 | <%= submit "Detect", class: "button"%>
4 | <% end %>
5 |
6 |
--------------------------------------------------------------------------------
/test/yolo_web/controllers/page_controller_test.exs:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.PageControllerTest do
2 | use YoloWeb.ConnCase
3 |
4 | test "GET /", %{conn: conn} do
5 | conn = get(conn, "/")
6 | assert html_response(conn, 200) =~ "Welcome to Phoenix!"
7 | end
8 | end
9 |
--------------------------------------------------------------------------------
/lib/yolo.ex:
--------------------------------------------------------------------------------
1 | defmodule Yolo do
2 | @moduledoc """
3 | Yolo keeps the contexts that define your domain
4 | and business logic.
5 |
6 | Contexts are also responsible for managing your data, regardless
7 | if it comes from the database, an external API or others.
8 | """
9 | end
10 |
--------------------------------------------------------------------------------
/config/test.exs:
--------------------------------------------------------------------------------
1 | use Mix.Config
2 |
3 | # We don't run a server during test. If one is required,
4 | # you can enable the server option below.
5 | config :yolo, YoloWeb.Endpoint,
6 | http: [port: 4002],
7 | server: false
8 |
9 | # Print only warnings and errors during test
10 | config :logger, level: :warn
11 |
--------------------------------------------------------------------------------
/priv/gettext/en/LC_MESSAGES/errors.po:
--------------------------------------------------------------------------------
1 | ## `msgid`s in this file come from POT (.pot) files.
2 | ##
3 | ## Do not add, change, or remove `msgid`s manually here as
4 | ## they're tied to the ones in the corresponding POT file
5 | ## (with the same domain).
6 | ##
7 | ## Use `mix gettext.extract --merge` or `mix gettext.merge`
8 | ## to merge POT files into PO files.
9 | msgid ""
10 | msgstr ""
11 | "Language: en\n"
12 |
--------------------------------------------------------------------------------
/priv/gettext/errors.pot:
--------------------------------------------------------------------------------
1 | ## This is a PO Template file.
2 | ##
3 | ## `msgid`s here are often extracted from source code.
4 | ## Add new translations manually only if they're dynamic
5 | ## translations that can't be statically extracted.
6 | ##
7 | ## Run `mix gettext.extract` to bring this file up to
8 | ## date. Leave `msgstr`s empty as changing them here has no
9 | ## effect: edit them in PO (`.po`) files instead.
10 |
11 |
--------------------------------------------------------------------------------
/lib/yolo_web/templates/page/index.html.eex:
--------------------------------------------------------------------------------
1 |
2 |
3 | Examples
4 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/test/yolo_web/views/error_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.ErrorViewTest do
2 | use YoloWeb.ConnCase, async: true
3 |
4 | # Bring render/3 and render_to_string/3 for testing custom views
5 | import Phoenix.View
6 |
7 | test "renders 404.html" do
8 | assert render_to_string(YoloWeb.ErrorView, "404.html", []) == "Not Found"
9 | end
10 |
11 | test "renders 500.html" do
12 | assert render_to_string(YoloWeb.ErrorView, "500.html", []) == "Internal Server Error"
13 | end
14 | end
15 |
--------------------------------------------------------------------------------
/assets/css/webcam.css:
--------------------------------------------------------------------------------
1 | .camera-container {
2 | position: relative;
3 | margin-left: -30%;
4 | }
5 |
6 | #camera {
7 | position: absolute;
8 | width:1280px;
9 | height:720px;
10 | top: 0px;
11 | left: 0px;
12 | z-index:1;
13 | }
14 |
15 | canvas#objects {
16 | position: absolute;
17 | width:1280px;
18 | height:720px;
19 | top: 0px;
20 | left: 0px;
21 | z-index:100;
22 | }
23 |
24 | .scaled-camera {
25 | transform: scale(0.6);
26 | }
27 |
28 | button#start_stop {
29 | display: block
30 | }
--------------------------------------------------------------------------------
/assets/js/socket.js:
--------------------------------------------------------------------------------
1 | // NOTE: The contents of this file will only be executed if
2 | // you uncomment its entry in "assets/js/app.js".
3 |
4 | // To use Phoenix channels, the first step is to import Socket,
5 | // and connect at the socket path in "lib/web/endpoint.ex".
6 | //
7 | // Pass the token on params as below. Or remove it
8 | // from the params if you are not using authentication.
9 | import {Socket} from "phoenix"
10 |
11 | let socket = new Socket("/socket", {params: {token: window.userToken}})
12 |
13 | socket.connect()
14 |
15 | export default socket
16 |
--------------------------------------------------------------------------------
/lib/yolo_web/views/error_view.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.ErrorView do
2 | use YoloWeb, :view
3 |
4 | # If you want to customize a particular status code
5 | # for a certain format, you may uncomment below.
6 | # def render("500.html", _assigns) do
7 | # "Internal Server Error"
8 | # end
9 |
10 | # By default, Phoenix returns the status message from
11 | # the template name. For example, "404.html" becomes
12 | # "Not Found".
13 | def template_not_found(template, _assigns) do
14 | Phoenix.Controller.status_message_from_template(template)
15 | end
16 | end
17 |
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | // We need to import the CSS so that webpack will load it.
2 | // The MiniCssExtractPlugin is used to separate it out into
3 | // its own CSS file.
4 | import css from "../css/app.css"
5 |
6 | // webpack automatically bundles all modules in your
7 | // entry points. Those entry points can be configured
8 | // in "webpack.config.js".
9 | //
10 | // Import dependencies
11 | //
12 | import "phoenix_html"
13 |
14 | // Import local files
15 | //
16 | // Local files can be imported directly using relative paths, for example:
17 | import socket from "./socket"
18 |
19 | import {hasCameraElement, setupWebcamAndDetection} from "./webcam"
20 |
21 | if(hasCameraElement()) setupWebcamAndDetection(socket);
22 |
--------------------------------------------------------------------------------
/lib/yolo_web/controllers/upload_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.UploadController do
2 | use YoloWeb, :controller
3 |
4 | def new(conn, _params) do
5 | render(conn, "new.html")
6 | end
7 |
8 | def create(conn, %{"upload" => upload}=_params) do
9 | data = File.read!(upload.path)
10 | detection = Yolo.Worker.request_detection(Yolo.Worker, data) |> Yolo.Worker.await()
11 |
12 | base64_image = base64_inline_image(data, upload.content_type)
13 | render(conn, "show.html", image: base64_image, detection: detection)
14 | end
15 |
16 | defp base64_inline_image(data, content_type) do
17 | image64 = Base.encode64(data)
18 | "data:#{content_type};base64, #{image64}"
19 | end
20 | end
21 |
--------------------------------------------------------------------------------
/lib/yolo_web/router.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.Router do
2 | use YoloWeb, :router
3 |
4 | pipeline :browser do
5 | plug :accepts, ["html"]
6 | plug :fetch_session
7 | plug :fetch_flash
8 | plug :protect_from_forgery
9 | plug :put_secure_browser_headers
10 | end
11 |
12 | pipeline :api do
13 | plug :accepts, ["json"]
14 | end
15 |
16 | scope "/", YoloWeb do
17 | pipe_through :browser
18 |
19 | get "/", PageController, :index
20 |
21 | resources "/uploads", UploadController, only: [:new, :create]
22 | get "/webcam", WebcamController, :index
23 | end
24 |
25 | # Other scopes may use custom stacks.
26 | # scope "/api", YoloWeb do
27 | # pipe_through :api
28 | # end
29 | end
30 |
--------------------------------------------------------------------------------
/assets/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "repository": {},
3 | "license": "MIT",
4 | "scripts": {
5 | "deploy": "webpack --mode production",
6 | "watch": "webpack --mode development --watch"
7 | },
8 | "dependencies": {
9 | "phoenix": "file:../deps/phoenix",
10 | "phoenix_html": "file:../deps/phoenix_html",
11 | "webcamjs": "1.0.26"
12 | },
13 | "devDependencies": {
14 | "@babel/core": "^7.0.0",
15 | "@babel/preset-env": "^7.0.0",
16 | "babel-loader": "^8.0.0",
17 | "copy-webpack-plugin": "^5.1.1",
18 | "css-loader": "^2.1.1",
19 | "mini-css-extract-plugin": "^0.4.0",
20 | "optimize-css-assets-webpack-plugin": "^5.0.3",
21 | "uglifyjs-webpack-plugin": "^1.2.4",
22 | "webpack": "^4.41.5",
23 | "webpack-cli": "^3.3.10"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/lib/yolo_web/gettext.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.Gettext do
2 | @moduledoc """
3 | A module providing Internationalization with a gettext-based API.
4 |
5 | By using [Gettext](https://hexdocs.pm/gettext),
6 | your module gains a set of macros for translations, for example:
7 |
8 | import YoloWeb.Gettext
9 |
10 | # Simple translation
11 | gettext("Here is the string to translate")
12 |
13 | # Plural translation
14 | ngettext("Here is the string to translate",
15 | "Here are the strings to translate",
16 | 3)
17 |
18 | # Domain-based translation
19 | dgettext("errors", "Here is the error message to translate")
20 |
21 | See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
22 | """
23 | use Gettext, otp_app: :yolo
24 | end
25 |
--------------------------------------------------------------------------------
/lib/yolo_web/templates/upload/show.html.eex:
--------------------------------------------------------------------------------
1 | New Image
2 |
3 |
4 |
5 | <%= o.label %>
9 |
12 |
--------------------------------------------------------------------------------
/test/support/channel_case.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.ChannelCase do
2 | @moduledoc """
3 | This module defines the test case to be used by
4 | channel tests.
5 |
6 | Such tests rely on `Phoenix.ChannelTest` and also
7 | import other functionality to make it easier
8 | to build common data structures and query the data layer.
9 |
10 | Finally, if the test case interacts with the database,
11 | it cannot be async. For this reason, every test runs
12 | inside a transaction which is reset at the beginning
13 | of the test unless the test case is marked as async.
14 | """
15 |
16 | use ExUnit.CaseTemplate
17 |
18 | using do
19 | quote do
20 | # Import conveniences for testing with channels
21 | use Phoenix.ChannelTest
22 |
23 | # The default endpoint for testing
24 | @endpoint YoloWeb.Endpoint
25 | end
26 | end
27 |
28 | setup _tags do
29 | :ok
30 | end
31 | end
32 |
--------------------------------------------------------------------------------
/config/prod.secret.exs:
--------------------------------------------------------------------------------
1 | # In this file, we load production configuration and secrets
2 | # from environment variables. You can also hardcode secrets,
3 | # although such is generally not recommended and you have to
4 | # remember to add this file to your .gitignore.
5 | use Mix.Config
6 |
7 | secret_key_base =
8 | System.get_env("SECRET_KEY_BASE") ||
9 | raise """
10 | environment variable SECRET_KEY_BASE is missing.
11 | You can generate one by calling: mix phx.gen.secret
12 | """
13 |
14 | config :yolo, YoloWeb.Endpoint,
15 | http: [:inet6, port: String.to_integer(System.get_env("PORT") || "4000")],
16 | secret_key_base: secret_key_base
17 |
18 | # ## Using releases (Elixir v1.9+)
19 | #
20 | # If you are doing OTP releases, you need to instruct Phoenix
21 | # to start each relevant endpoint:
22 | #
23 | # config :yolo, YoloWeb.Endpoint, server: true
24 | #
25 | # Then you can assemble a release by calling `mix release`.
26 | # See `mix help release` for more information.
27 |
--------------------------------------------------------------------------------
/lib/yolo/application.ex:
--------------------------------------------------------------------------------
1 | defmodule Yolo.Application do
2 | # See https://hexdocs.pm/elixir/Application.html
3 | # for more information on OTP Applications
4 | @moduledoc false
5 |
6 | use Application
7 |
8 | def start(_type, _args) do
9 | # List all child processes to be supervised
10 | children = [
11 | # Start the endpoint when the application starts
12 | YoloWeb.Endpoint,
13 | # Starts a worker by calling: Yolo.Worker.start_link(arg)
14 | {Yolo.Worker, [name: Yolo.Worker]},
15 | ]
16 |
17 | # See https://hexdocs.pm/elixir/Supervisor.html
18 | # for other strategies and supported options
19 | opts = [strategy: :one_for_one, name: Yolo.Supervisor]
20 | Supervisor.start_link(children, opts)
21 | end
22 |
23 | # Tell Phoenix to update the endpoint configuration
24 | # whenever the application is updated.
25 | def config_change(changed, _new, removed) do
26 | YoloWeb.Endpoint.config_change(changed, removed)
27 | :ok
28 | end
29 | end
30 |
--------------------------------------------------------------------------------
/test/support/conn_case.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.ConnCase do
2 | @moduledoc """
3 | This module defines the test case to be used by
4 | tests that require setting up a connection.
5 |
6 | Such tests rely on `Phoenix.ConnTest` and also
7 | import other functionality to make it easier
8 | to build common data structures and query the data layer.
9 |
10 | Finally, if the test case interacts with the database,
11 | it cannot be async. For this reason, every test runs
12 | inside a transaction which is reset at the beginning
13 | of the test unless the test case is marked as async.
14 | """
15 |
16 | use ExUnit.CaseTemplate
17 |
18 | using do
19 | quote do
20 | # Import conveniences for testing with connections
21 | use Phoenix.ConnTest
22 | alias YoloWeb.Router.Helpers, as: Routes
23 |
24 | # The default endpoint for testing
25 | @endpoint YoloWeb.Endpoint
26 | end
27 | end
28 |
29 | setup _tags do
30 | {:ok, conn: Phoenix.ConnTest.build_conn()}
31 | end
32 | end
33 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .elixir_ls/
2 | .vscode/
3 | # The directory Mix will write compiled artifacts to.
4 | /_build/
5 |
6 | # If you run "mix test --cover", coverage assets end up here.
7 | /cover/
8 |
9 | # The directory Mix downloads your dependencies sources to.
10 | /deps/
11 |
12 | # Where 3rd-party dependencies like ExDoc output generated docs.
13 | /doc/
14 |
15 | # Ignore .fetch files in case you like to edit your project deps locally.
16 | /.fetch
17 |
18 | # If the VM crashes, it generates a dump, let's ignore it too.
19 | erl_crash.dump
20 |
21 | # Also ignore archive artifacts (built via "mix archive.build").
22 | *.ez
23 |
24 | # Ignore package tarball (built via "mix hex.build").
25 | yolo-*.tar
26 |
27 | # If NPM crashes, it generates a log, let's ignore it too.
28 | npm-debug.log
29 |
30 | # The directory NPM downloads your dependencies sources to.
31 | /assets/node_modules/
32 |
33 | # Since we are building assets from assets/,
34 | # we ignore priv/static. You may want to comment
35 | # this depending on your deployment strategy.
36 | /priv/static/
37 |
--------------------------------------------------------------------------------
/config/config.exs:
--------------------------------------------------------------------------------
1 | # This file is responsible for configuring your application
2 | # and its dependencies with the aid of the Mix.Config module.
3 | #
4 | # This configuration file is loaded before any dependency and
5 | # is restricted to this project.
6 |
7 | # General application configuration
8 | use Mix.Config
9 |
10 | # Configures the endpoint
11 | config :yolo, YoloWeb.Endpoint,
12 | url: [host: "localhost"],
13 | secret_key_base: "BjMzw0zECprbtk0o20zBI7D20GQsmUATr6qe5U3RpcmWNjBDQ8iIaB4SC3Nxr5IB",
14 | render_errors: [view: YoloWeb.ErrorView, accepts: ~w(html json)],
15 | pubsub: [name: Yolo.PubSub, adapter: Phoenix.PubSub.PG2]
16 |
17 | # Configures Elixir's Logger
18 | config :logger, :console,
19 | format: "$time $metadata[$level] $message\n",
20 | metadata: [:request_id]
21 |
22 | # Use Jason for JSON parsing in Phoenix
23 | config :phoenix, :json_library, Jason
24 |
25 | # Import environment specific config. This must remain at the bottom
26 | # of this file so it overrides the configuration defined above.
27 | import_config "#{Mix.env()}.exs"
28 |
--------------------------------------------------------------------------------
/lib/yolo_web/channels/user_socket.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.UserSocket do
2 | use Phoenix.Socket
3 |
4 | ## Channels
5 | channel "webcam:detection", YoloWeb.WebcamChannel
6 |
7 | # Socket params are passed from the client and can
8 | # be used to verify and authenticate a user. After
9 | # verification, you can put default assigns into
10 | # the socket that will be set for all channels, ie
11 | #
12 | # {:ok, assign(socket, :user_id, verified_user_id)}
13 | #
14 | # To deny connection, return `:error`.
15 | #
16 | # See `Phoenix.Token` documentation for examples in
17 | # performing token verification on connect.
18 | def connect(_params, socket, _connect_info) do
19 | {:ok, socket}
20 | end
21 |
22 | # Socket id's are topics that allow you to identify all sockets for a given user:
23 | #
24 | # def id(socket), do: "user_socket:#{socket.assigns.user_id}"
25 | #
26 | # Would allow you to broadcast a "disconnect" event and terminate
27 | # all active sockets and channels for a given user:
28 | #
29 | # YoloWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
30 | #
31 | # Returning `nil` makes this socket anonymous.
32 | def id(_socket), do: nil
33 | end
34 |
--------------------------------------------------------------------------------
/mix.exs:
--------------------------------------------------------------------------------
1 | defmodule Yolo.MixProject do
2 | use Mix.Project
3 |
4 | def project do
5 | [
6 | app: :yolo,
7 | version: "0.1.0",
8 | elixir: "~> 1.5",
9 | elixirc_paths: elixirc_paths(Mix.env()),
10 | compilers: [:phoenix, :gettext] ++ Mix.compilers(),
11 | start_permanent: Mix.env() == :prod,
12 | deps: deps()
13 | ]
14 | end
15 |
16 | # Configuration for the OTP application.
17 | #
18 | # Type `mix help compile.app` for more information.
19 | def application do
20 | [
21 | mod: {Yolo.Application, []},
22 | extra_applications: [:logger, :runtime_tools]
23 | ]
24 | end
25 |
26 | # Specifies which paths to compile per environment.
27 | defp elixirc_paths(:test), do: ["lib", "test/support"]
28 | defp elixirc_paths(_), do: ["lib"]
29 |
30 | # Specifies your project dependencies.
31 | #
32 | # Type `mix help deps` for examples and options.
33 | defp deps do
34 | [
35 | {:phoenix, "~> 1.4.10"},
36 | {:phoenix_pubsub, "~> 1.1"},
37 | {:phoenix_html, "~> 2.11"},
38 | {:phoenix_live_reload, "~> 1.2", only: :dev},
39 | {:gettext, "~> 0.11"},
40 | {:jason, "~> 1.0"},
41 | {:plug_cowboy, "~> 2.0"},
42 | {:uuid, "~> 1.1"},
43 | ]
44 | end
45 | end
46 |
--------------------------------------------------------------------------------
/assets/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const glob = require('glob');
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
5 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
6 | const CopyWebpackPlugin = require('copy-webpack-plugin');
7 |
8 | module.exports = (env, options) => ({
9 | optimization: {
10 | minimizer: [
11 | new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
12 | new OptimizeCSSAssetsPlugin({})
13 | ]
14 | },
15 | entry: {
16 | './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
17 | },
18 | output: {
19 | filename: 'app.js',
20 | path: path.resolve(__dirname, '../priv/static/js')
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.js$/,
26 | exclude: /node_modules/,
27 | use: {
28 | loader: 'babel-loader'
29 | }
30 | },
31 | {
32 | test: /\.css$/,
33 | use: [MiniCssExtractPlugin.loader, 'css-loader']
34 | }
35 | ]
36 | },
37 | plugins: [
38 | new MiniCssExtractPlugin({ filename: '../css/app.css' }),
39 | new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
40 | ]
41 | });
42 |
--------------------------------------------------------------------------------
/lib/yolo_web/templates/layout/app.html.eex:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Yolo · Phoenix Framework
8 |
24 | <%= get_flash(@conn, :info) %>
25 | <%= get_flash(@conn, :error) %>
26 | <%= render @view_module, @view_template, assigns %>
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Real-time Object Detection with Phoenix and Python
2 | >}}, %{port: port}=worker) do
79 | result = get_result!(json_string)
80 | # getting from pid and removing the request from the map
81 | {from_pid, worker} = pop_in(worker, [:requests, image_id])
82 | # sending the result map to from_pid
83 | send(from_pid, {:detected, image_id, result})
84 | {:noreply, worker}
85 | end
86 |
87 |
88 | defp get_result!(json_string) do
89 | result = Jason.decode!(json_string)
90 | %{
91 | shape: %{width: result["shape"]["width"], height: result["shape"]["height"]},
92 | objects: get_objects(result["labels"], result["boxes"])
93 | }
94 | end
95 |
96 | def get_objects(labels, boxes) do
97 | Enum.zip(labels, boxes)
98 | |> Enum.map(fn {label, [x, y, bottom_right_x, bottom_right_y]}->
99 | w = bottom_right_x - x
100 | h = bottom_right_y - y
101 | %{label: label, x: x, y: y, w: w, h: h}
102 | end)
103 | end
104 | end
105 |
--------------------------------------------------------------------------------
/mix.lock:
--------------------------------------------------------------------------------
1 | %{
2 | "b64fast": {:hex, :b64fast, "0.2.2", "394a548c7c236aec3681b55d3e32239ee007229b4c12ae3d262b9597fe623859", [:rebar3], [], "hexpm"},
3 | "cowboy": {:hex, :cowboy, "2.7.0", "91ed100138a764355f43316b1d23d7ff6bdb0de4ea618cb5d8677c93a7a2f115", [:rebar3], [{:cowlib, "~> 2.8.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "~> 1.7.1", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm"},
4 | "cowlib": {:hex, :cowlib, "2.8.0", "fd0ff1787db84ac415b8211573e9a30a3ebe71b5cbff7f720089972b2319c8a4", [:rebar3], [], "hexpm"},
5 | "file_system": {:hex, :file_system, "0.2.7", "e6f7f155970975789f26e77b8b8d8ab084c59844d8ecfaf58cbda31c494d14aa", [:mix], [], "hexpm"},
6 | "gettext": {:hex, :gettext, "0.17.1", "8baab33482df4907b3eae22f719da492cee3981a26e649b9c2be1c0192616962", [:mix], [], "hexpm"},
7 | "jason": {:hex, :jason, "1.1.2", "b03dedea67a99223a2eaf9f1264ce37154564de899fd3d8b9a21b1a6fd64afe7", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm"},
8 | "message_pack": {:hex, :message_pack, "0.2.0", "244350d139b96c94729666dfac24440c3b1e8b3d1cc67287e78b2b6779593020", [:mix], [], "hexpm"},
9 | "mime": {:hex, :mime, "1.3.1", "30ce04ab3175b6ad0bdce0035cba77bba68b813d523d1aac73d9781b4d193cf8", [:mix], [], "hexpm"},
10 | "phoenix": {:hex, :phoenix, "1.4.11", "d112c862f6959f98e6e915c3b76c7a87ca3efd075850c8daa7c3c7a609014b0d", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 1.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.8.1 or ~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm"},
11 | "phoenix_html": {:hex, :phoenix_html, "2.13.3", "850e292ff6e204257f5f9c4c54a8cb1f6fbc16ed53d360c2b780a3d0ba333867", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
12 | "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.1", "274a4b07c4adbdd7785d45a8b0bb57634d0b4f45b18d2c508b26c0344bd59b8f", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm"},
13 | "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.1.2", "496c303bdf1b2e98a9d26e89af5bba3ab487ba3a3735f74bf1f4064d2a845a3e", [:mix], [], "hexpm"},
14 | "plug": {:hex, :plug, "1.8.3", "12d5f9796dc72e8ac9614e94bda5e51c4c028d0d428e9297650d09e15a684478", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm"},
15 | "plug_cowboy": {:hex, :plug_cowboy, "2.1.0", "b75768153c3a8a9e8039d4b25bb9b14efbc58e9c4a6e6a270abff1cd30cbe320", [:mix], [{:cowboy, "~> 2.5", [hex: :cowboy, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
16 | "plug_crypto": {:hex, :plug_crypto, "1.0.0", "18e49317d3fa343f24620ed22795ec29d4a5e602d52d1513ccea0b07d8ea7d4d", [:mix], [], "hexpm"},
17 | "ranch": {:hex, :ranch, "1.7.1", "6b1fab51b49196860b733a49c07604465a47bdb78aa10c1c16a3d199f7f8c881", [:rebar3], [], "hexpm"},
18 | "telemetry": {:hex, :telemetry, "0.4.1", "ae2718484892448a24470e6aa341bc847c3277bfb8d4e9289f7474d752c09c7f", [:rebar3], [], "hexpm"},
19 | "uuid": {:hex, :uuid, "1.1.8", "e22fc04499de0de3ed1116b770c7737779f226ceefa0badb3592e64d5cfb4eb9", [:mix], [], "hexpm"},
20 | }
21 |
--------------------------------------------------------------------------------
/assets/css/phoenix.css:
--------------------------------------------------------------------------------
1 | /* Includes some default style for the starter application.
2 | * This can be safely deleted to start fresh.
3 | */
4 |
5 | /* Milligram v1.3.0 https://milligram.github.io
6 | * Copyright (c) 2017 CJ Patoilo Licensed under the MIT license
7 | */
8 |
9 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='email'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem;width:100%}input[type='email']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8, 
3 |
4 |
5 | In this repository ([part1](https://github.com/poeticoding/yolo_example/tree/part1) tag) you find the code described in the [Real-time Object Detection with Phoenix and Python](https://www.poeticoding.com/real-time-object-detection-with-phoenix-and-python/) article.
6 |
7 |
8 | ## Python
9 |
10 | This version uses [Elixir Port](https://hexdocs.pm/elixir/Port.html), which takes care of launching and communicating with [`python_scripts/detect.py`](python_scripts/detect.py). Be sure you have Python 3.6 installed, along with the libraries you find in [`python_scripts/requirements`](python_scripts/requirements.txt).
11 |
12 | ## Phoenix
13 |
14 | Configure the `Yolo.Worker` in [`config/dev.exs`](config/dev.exs)
15 |
16 | ```elixir
17 | config :yolo, Yolo.Worker,
18 | python: "python", # with Anaconda3 and yolo env is "/opt/anaconda3/envs/yolo/bin/python"
19 | detect_script: "python_scripts/detect.py",
20 | model: {:system, "YOLO_MODEL"}
21 | ```
22 |
23 | * `:python` is the path of your python3.6 executable
24 | * `:detect_script` is the path of the [`detect.py`](python_scripts/detect.py) script.
25 | * just leave `:model` set to `{:system, "YOLO_MODEL"}` - it will load the model name from the `YOLO_MODEL` environment variable.
26 |
27 |
--------------------------------------------------------------------------------
/lib/yolo_web/endpoint.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.Endpoint do
2 | use Phoenix.Endpoint, otp_app: :yolo
3 |
4 | socket "/socket", YoloWeb.UserSocket,
5 | websocket: true,
6 | longpoll: false
7 |
8 | # Serve at "/" the static files from "priv/static" directory.
9 | #
10 | # You should set gzip to true if you are running phx.digest
11 | # when deploying your static files in production.
12 | plug Plug.Static,
13 | at: "/",
14 | from: :yolo,
15 | gzip: false,
16 | only: ~w(css fonts images js favicon.ico robots.txt)
17 |
18 | # Code reloading can be explicitly enabled under the
19 | # :code_reloader configuration of your endpoint.
20 | if code_reloading? do
21 | socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
22 | plug Phoenix.LiveReloader
23 | plug Phoenix.CodeReloader
24 | end
25 |
26 | plug Plug.RequestId
27 | plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
28 |
29 | plug Plug.Parsers,
30 | parsers: [:urlencoded, :multipart, :json],
31 | pass: ["*/*"],
32 | json_decoder: Phoenix.json_library()
33 |
34 | plug Plug.MethodOverride
35 | plug Plug.Head
36 |
37 | # The session will be stored in the cookie and signed,
38 | # this means its contents can be read but not tampered with.
39 | # Set :encryption_salt if you would also like to encrypt it.
40 | plug Plug.Session,
41 | store: :cookie,
42 | key: "_yolo_key",
43 | signing_salt: "UbN/QnRe"
44 |
45 | plug YoloWeb.Router
46 | end
47 |
--------------------------------------------------------------------------------
/lib/yolo_web/channels/webcam_channel.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.WebcamChannel do
2 | use Phoenix.Channel
3 |
4 | def join("webcam:detection", _params, socket) do
5 | socket =
6 | socket
7 | |> assign(:current_image_id, nil)
8 | |> assign(:latest_frame, nil)
9 | {:ok, socket}
10 | end
11 |
12 | def handle_in("frame", %{"frame" => "data:image/jpeg;base64,"<> base64frame}=_event, %{assigns: %{current_image_id: image_id}}=socket) do
13 | if image_id == nil do
14 | {:noreply, detect(socket, base64frame)}
15 | else
16 | {:noreply, assign(socket, :latest_frame, base64frame)}
17 | end
18 | end
19 |
20 | def handle_info({:detected, image_id, result}, %{assigns: %{current_image_id: image_id}}=socket) do
21 | handle_detected(result, socket)
22 | end
23 |
24 | def handle_info({:detected, _, _}, socket) do
25 | {:noreply, socket}
26 | end
27 |
28 | def detect(socket, b64frame) do
29 | frame = Base.decode64!(b64frame)
30 | image_id = Yolo.Worker.request_detection(Yolo.Worker, frame)
31 |
32 | socket
33 | |> assign(:current_image_id, image_id)
34 | |> assign(:latest_frame, nil)
35 | end
36 |
37 | def handle_detected(result, socket) do
38 | push(socket, "detected", result)
39 |
40 | socket =
41 | socket
42 | |> assign(:current_image_id, nil)
43 | |> detect_if_need()
44 |
45 | {:noreply, socket}
46 | end
47 |
48 |
49 | def detect_if_need(socket) do
50 | if socket.assigns.latest_frame != nil do
51 | detect(socket, socket.assigns.latest_frame)
52 | else
53 | socket
54 | end
55 | end
56 |
57 | end
58 |
--------------------------------------------------------------------------------
/lib/yolo_web/views/error_helpers.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb.ErrorHelpers do
2 | @moduledoc """
3 | Conveniences for translating and building error messages.
4 | """
5 |
6 | use Phoenix.HTML
7 |
8 | @doc """
9 | Generates tag for inlined form input errors.
10 | """
11 | def error_tag(form, field) do
12 | Enum.map(Keyword.get_values(form.errors, field), fn error ->
13 | content_tag(:span, translate_error(error), class: "help-block")
14 | end)
15 | end
16 |
17 | @doc """
18 | Translates an error message using gettext.
19 | """
20 | def translate_error({msg, opts}) do
21 | # When using gettext, we typically pass the strings we want
22 | # to translate as a static argument:
23 | #
24 | # # Translate "is invalid" in the "errors" domain
25 | # dgettext("errors", "is invalid")
26 | #
27 | # # Translate the number of files with plural rules
28 | # dngettext("errors", "1 file", "%{count} files", count)
29 | #
30 | # Because the error messages we show in our forms and APIs
31 | # are defined inside Ecto, we need to translate them dynamically.
32 | # This requires us to call the Gettext module passing our gettext
33 | # backend as first argument.
34 | #
35 | # Note we use the "errors" domain, which means translations
36 | # should be written to the errors.po file. The :count option is
37 | # set by Ecto and indicates we should also apply plural rules.
38 | if count = opts[:count] do
39 | Gettext.dngettext(YoloWeb.Gettext, "errors", msg, msg, count, opts)
40 | else
41 | Gettext.dgettext(YoloWeb.Gettext, "errors", msg, opts)
42 | end
43 | end
44 | end
45 |
--------------------------------------------------------------------------------
/lib/yolo_web.ex:
--------------------------------------------------------------------------------
1 | defmodule YoloWeb do
2 | @moduledoc """
3 | The entrypoint for defining your web interface, such
4 | as controllers, views, channels and so on.
5 |
6 | This can be used in your application as:
7 |
8 | use YoloWeb, :controller
9 | use YoloWeb, :view
10 |
11 | The definitions below will be executed for every view,
12 | controller, etc, so keep them short and clean, focused
13 | on imports, uses and aliases.
14 |
15 | Do NOT define functions inside the quoted expressions
16 | below. Instead, define any helper function in modules
17 | and import those modules here.
18 | """
19 |
20 | def controller do
21 | quote do
22 | use Phoenix.Controller, namespace: YoloWeb
23 |
24 | import Plug.Conn
25 | import YoloWeb.Gettext
26 | alias YoloWeb.Router.Helpers, as: Routes
27 | end
28 | end
29 |
30 | def view do
31 | quote do
32 | use Phoenix.View,
33 | root: "lib/yolo_web/templates",
34 | namespace: YoloWeb
35 |
36 | # Import convenience functions from controllers
37 | import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]
38 |
39 | # Use all HTML functionality (forms, tags, etc)
40 | use Phoenix.HTML
41 |
42 | import YoloWeb.ErrorHelpers
43 | import YoloWeb.Gettext
44 | alias YoloWeb.Router.Helpers, as: Routes
45 | end
46 | end
47 |
48 | def router do
49 | quote do
50 | use Phoenix.Router
51 | import Plug.Conn
52 | import Phoenix.Controller
53 | end
54 | end
55 |
56 | def channel do
57 | quote do
58 | use Phoenix.Channel
59 | import YoloWeb.Gettext
60 | end
61 | end
62 |
63 | @doc """
64 | When used, dispatch to the appropriate controller/view/etc.
65 | """
66 | defmacro __using__(which) when is_atom(which) do
67 | apply(__MODULE__, which, [])
68 | end
69 | end
70 |
--------------------------------------------------------------------------------
/assets/js/upload.js:
--------------------------------------------------------------------------------
1 | import jQuery from "jquery"
2 |
3 |
4 | function createProgressHandler($form) {
5 | let $progress = $form.find("progress"),
6 | $label = $form.find("label.progress-percentage");
7 |
8 | return function handleProgressEvent(progressEvent) {
9 | let progress = progressEvent.loaded / progressEvent.total,
10 | percentage = progress * 100,
11 | percentageStr = `${percentage.toFixed(2)}%`; //xx.xx%
12 |
13 | $label.text(percentageStr)
14 |
15 | $progress
16 | .attr("max", progressEvent.total)
17 | .attr("value", progressEvent.loaded);
18 | }
19 | }
20 |
21 |
22 |
23 | function startUpload(formData, $form) {
24 | let $progress = $form.find("progress");
25 | $progress.show()
26 |
27 | jQuery.ajax({
28 | type: 'POST',
29 | url: '/uploads',
30 | data: formData,
31 | processData: false, //IMPORTANT!
32 | xhr: function () {
33 | let xhr = jQuery.ajaxSettings.xhr();
34 | if (xhr.upload) {
35 | xhr.upload.addEventListener('progress', createProgressHandler($form), false);
36 | }
37 | return xhr;
38 | },
39 |
40 | cache: false,
41 | contentType: false,
42 |
43 | success: function (data) {
44 | // window.location = "/uploads"
45 | console.log(data)
46 | },
47 |
48 | error: function (data) {
49 | console.error(data);
50 | }
51 | })
52 | }
53 |
54 | jQuery(document).ready(function ($) {
55 | let $form = $("#upload_form"),
56 | $fileInput = $form.find("input[type='file']");
57 |
58 | $form.submit(function (event) {
59 | let formData = new FormData(this);
60 | startUpload(formData, $form);
61 |
62 | event.preventDefault();
63 | })
64 |
65 | $fileInput.on("change", function (e) {
66 | $form.trigger("submit");
67 | });
68 |
69 |
70 | })
71 |
72 |
--------------------------------------------------------------------------------
/config/prod.exs:
--------------------------------------------------------------------------------
1 | use Mix.Config
2 |
3 | # For production, don't forget to configure the url host
4 | # to something meaningful, Phoenix uses this information
5 | # when generating URLs.
6 | #
7 | # Note we also include the path to a cache manifest
8 | # containing the digested version of static files. This
9 | # manifest is generated by the `mix phx.digest` task,
10 | # which you should run after static files are built and
11 | # before starting your production server.
12 | config :yolo, YoloWeb.Endpoint,
13 | url: [host: "example.com", port: 80],
14 | cache_static_manifest: "priv/static/cache_manifest.json"
15 |
16 | # Do not print debug messages in production
17 | config :logger, level: :info
18 |
19 | # ## SSL Support
20 | #
21 | # To get SSL working, you will need to add the `https` key
22 | # to the previous section and set your `:url` port to 443:
23 | #
24 | # config :yolo, YoloWeb.Endpoint,
25 | # ...
26 | # url: [host: "example.com", port: 443],
27 | # https: [
28 | # :inet6,
29 | # port: 443,
30 | # cipher_suite: :strong,
31 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
32 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
33 | # ]
34 | #
35 | # The `cipher_suite` is set to `:strong` to support only the
36 | # latest and more secure SSL ciphers. This means old browsers
37 | # and clients may not be supported. You can set it to
38 | # `:compatible` for wider support.
39 | #
40 | # `:keyfile` and `:certfile` expect an absolute path to the key
41 | # and cert in disk or a relative path inside priv, for example
42 | # "priv/ssl/server.key". For all supported SSL configuration
43 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
44 | #
45 | # We also recommend setting `force_ssl` in your endpoint, ensuring
46 | # no data is ever sent via http, always redirecting to https:
47 | #
48 | # config :yolo, YoloWeb.Endpoint,
49 | # force_ssl: [hsts: true]
50 | #
51 | # Check `Plug.SSL` for all available options in `force_ssl`.
52 |
53 | # Finally import the config/prod.secret.exs which loads secrets
54 | # and configuration from environment variables.
55 | import_config "prod.secret.exs"
56 |
--------------------------------------------------------------------------------
/python_scripts/detect.py:
--------------------------------------------------------------------------------
1 | import os, sys
2 | from struct import unpack, pack
3 | import numpy as np
4 | import cv2
5 | import cvlib as cv
6 | import json
7 |
8 | UUID4_SIZE = 16
9 |
10 | # setup of FD 3 for input (instead of stdin)
11 | # FD 4 for output (instead of stdout)
12 | def setup_io():
13 | return os.fdopen(3,"rb"), os.fdopen(4,"wb")
14 |
15 |
16 | def read_message(input_f):
17 | # reading the first 4 bytes with the length of the data
18 | # the other 32 bytes are the UUID string,
19 | # the rest is the image
20 |
21 | header = input_f.read(4)
22 | if len(header) != 4:
23 | return None # EOF
24 |
25 | (total_msg_size,) = unpack("!I", header)
26 | # image id
27 | image_id = input_f.read(UUID4_SIZE)
28 |
29 | # read image data
30 | image_data = input_f.read(total_msg_size - UUID4_SIZE)
31 |
32 | # converting the binary to a opencv image
33 | nparr = np.fromstring(image_data, np.uint8)
34 | image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
35 |
36 | return {'id': image_id, 'image': image}
37 |
38 | def detect(image, model):
39 | boxes, labels, _conf = cv.detect_common_objects(image, model=model)
40 | return boxes, labels
41 |
42 | def write_result(output, image_id, image_shape, boxes, labels):
43 | result = json.dumps({
44 | 'shape': image_shape,
45 | 'boxes': boxes,
46 | 'labels': labels
47 | }).encode("ascii")
48 |
49 | header = pack("!I", len(result) + UUID4_SIZE)
50 | output.write(header)
51 | output.write(image_id)
52 | output.write(result)
53 | output.flush()
54 |
55 | def run(model):
56 | input_f, output_f = setup_io()
57 |
58 | while True:
59 | msg = read_message(input_f)
60 | if msg is None: break
61 |
62 | #image shape
63 | height, width, _ = msg["image"].shape
64 | shape = {'width': width, 'height': height}
65 |
66 | #detect object
67 | boxes, labels = detect(msg["image"], model)
68 |
69 | #send result back to elixir
70 | write_result(output_f, msg["id"], shape, boxes, labels)
71 |
72 | if __name__ == "__main__":
73 | model = "yolov3"
74 | if len(sys.argv) > 1:
75 | model = sys.argv[1]
76 |
77 | run(model)
--------------------------------------------------------------------------------
/config/dev.exs:
--------------------------------------------------------------------------------
1 | use Mix.Config
2 |
3 | # For development, we disable any cache and enable
4 | # debugging and code reloading.
5 | #
6 | # The watchers configuration can be used to run external
7 | # watchers to your application. For example, we use it
8 | # with webpack to recompile .js and .css sources.
9 | config :yolo, YoloWeb.Endpoint,
10 | http: [port: 4000],
11 | debug_errors: true,
12 | code_reloader: true,
13 | check_origin: false,
14 | watchers: [
15 | node: [
16 | "node_modules/webpack/bin/webpack.js",
17 | "--mode",
18 | "development",
19 | "--watch-stdin",
20 | cd: Path.expand("../assets", __DIR__)
21 | ]
22 | ]
23 |
24 | # ## SSL Support
25 | #
26 | # In order to use HTTPS in development, a self-signed
27 | # certificate can be generated by running the following
28 | # Mix task:
29 | #
30 | # mix phx.gen.cert
31 | #
32 | # Note that this task requires Erlang/OTP 20 or later.
33 | # Run `mix help phx.gen.cert` for more information.
34 | #
35 | # The `http:` config above can be replaced with:
36 | #
37 | # https: [
38 | # port: 4001,
39 | # cipher_suite: :strong,
40 | # keyfile: "priv/cert/selfsigned_key.pem",
41 | # certfile: "priv/cert/selfsigned.pem"
42 | # ],
43 | #
44 | # If desired, both `http:` and `https:` keys can be
45 | # configured to run both http and https servers on
46 | # different ports.
47 |
48 | # Watch static and templates for browser reloading.
49 | config :yolo, YoloWeb.Endpoint,
50 | live_reload: [
51 | patterns: [
52 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
53 | ~r"priv/gettext/.*(po)$",
54 | ~r"lib/yolo_web/{live,views}/.*(ex)$",
55 | ~r"lib/yolo_web/templates/.*(eex)$"
56 | ]
57 | ]
58 |
59 | # Do not include metadata nor timestamps in development logs
60 | config :logger, :console, format: "[$level] $message\n"
61 |
62 | # Set a higher stacktrace during development. Avoid configuring such
63 | # in production as building large stacktraces may be expensive.
64 | config :phoenix, :stacktrace_depth, 20
65 |
66 | # Initialize plugs at runtime for faster development compilation
67 | config :phoenix, :plug_init_mode, :runtime
68 |
69 | config :yolo, Yolo.Worker,
70 | python: "python", # with Anaconda3 and yolo env is "/opt/anaconda3/envs/yolo/bin/python"
71 | detect_script: "python_scripts/detect.py",
72 | model: {:system, "YOLO_MODEL"}
73 |
--------------------------------------------------------------------------------
/assets/js/webcam.js:
--------------------------------------------------------------------------------
1 | import Webcam from "webcamjs"
2 |
3 | const FPS = 1; // frames per second
4 |
5 | export function setupWebcamAndDetection(socket) {
6 |
7 | let channel = socket.channel("webcam:detection", {})
8 | channel.join()
9 | .receive("ok", resp => { console.log(`Joined successfully to "detection:alvise"`, resp); })
10 | .receive("error", resp => { console.log("Unable to join", resp) })
11 |
12 |
13 | Webcam.set({
14 | width: 1280,
15 | height: 720,
16 | image_format: 'jpeg',
17 | jpeg_quality: 90,
18 | fps: 30
19 | });
20 | Webcam.attach("#camera")
21 |
22 |
23 | function capture() {
24 | Webcam.snap(function (data_uri, canvas, context) {
25 | channel.push("frame", { "frame": data_uri})
26 | });
27 | }
28 |
29 | //listen to "detected" events and calls draw_objects() for each event
30 | channel.on("detected", draw_objects);
31 |
32 | //our canvas element
33 | let canvas = document.getElementById('objects');
34 | let ctx = canvas.getContext('2d');
35 | const boxColor = "blue";
36 | //labels font size
37 | const fontSize = 18;
38 |
39 | function draw_objects(result) {
40 |
41 | let objects = result.objects;
42 |
43 | //clear the canvas from previews rendering
44 | ctx.clearRect(0, 0, canvas.width, canvas.height);
45 | ctx.lineWidth = 4;
46 | ctx.font = `${fontSize}px Helvetica`;
47 |
48 | //for each detected object render label and box
49 | objects.forEach(function(obj) {
50 | let width = ctx.measureText(obj.label).width;
51 |
52 | // box
53 | ctx.strokeStyle = boxColor;
54 | ctx.strokeRect(obj.x, obj.y, obj.w, obj.h);
55 |
56 | // white label + background
57 | ctx.fillStyle = boxColor;
58 | ctx.fillRect(obj.x - 2, obj.y - fontSize, width + 10, fontSize);
59 | ctx.fillStyle = "white";
60 | ctx.fillText(obj.label, obj.x, obj.y - 2);
61 | });
62 | }
63 |
64 | //toggle button starts and stops an interval
65 | let intervalID = null;
66 |
67 | document.getElementById("start_stop")
68 | .addEventListener("click", function(){
69 |
70 | if(intervalID == null) {
71 | intervalID = setInterval(capture, 1000/FPS)
72 | this.textContent = "Stop";
73 | } else {
74 | clearInterval(intervalID);
75 | intervalID = null;
76 | this.textContent = "Start";
77 | }
78 | });
79 | }
80 |
81 | export function hasCameraElement() {
82 | return document.querySelector("#camera") != null;
83 | }
84 |
85 |
86 |
--------------------------------------------------------------------------------
/lib/yolo/worker.ex:
--------------------------------------------------------------------------------
1 | defmodule Yolo.Worker do
2 | use GenServer
3 |
4 | @timeout 5_000
5 | @uuid4_size 16
6 |
7 | def start_link(opts \\ []) do
8 | GenServer.start_link(__MODULE__, :ok, opts)
9 | end
10 |
11 | @default_config [
12 | python: "python",
13 | detect_script: "python_scripts/detect.py",
14 | model: "yolov3"
15 | ]
16 |
17 | def config do
18 | @default_config
19 | |> Keyword.merge(Application.get_env(:yolo, __MODULE__, []))
20 |
21 | #loads the values from env variables when {:system, env_var_name}
22 | |> Enum.map(fn
23 |
24 | # it finds the full path when not provided
25 | {:python, path} -> {:python, System.find_executable(path)}
26 |
27 | # it loads the value from the environment variable
28 | # when the env variable is not set, it defaults to @default_config[option]
29 | {option, {:system, env_variable}} ->
30 | {option, System.get_env(env_variable, @default_config[option])}
31 |
32 | # all the other options
33 | config -> config
34 |
35 | end)
36 | |> Enum.into(%{})
37 | end
38 |
39 | def init(:ok) do
40 | config = config()
41 |
42 | port = Port.open(
43 | {:spawn_executable, config.python},
44 | [:binary, :nouse_stdio, {:packet, 4},
45 | args: [config.detect_script, config.model]
46 | ])
47 |
48 | {:ok, %{port: port, requests: %{}}}
49 | end
50 |
51 |
52 | def request_detection(pid, image) do
53 | # UUID.uuid4(:hex) is 32 bytes
54 | image_id = UUID.uuid4() |> UUID.string_to_binary!()
55 | request_detection(pid, image_id, image)
56 | end
57 |
58 |
59 | def request_detection(pid, image_id, image) when byte_size(image_id) == @uuid4_size do
60 | GenServer.call(pid, {:detect, image_id, image})
61 | end
62 |
63 | def await(image_id, timeout \\ @timeout) do
64 | receive do
65 | {:detected, ^image_id, result} -> result
66 | after
67 | timeout -> {:detection_timeout, image_id}
68 | end
69 | end
70 |
71 | def handle_call({:detect, image_id, image_data}, {from_pid, _}, worker) do
72 | Port.command(worker.port, [image_id, image_data])
73 | worker = put_in(worker, [:requests, image_id], from_pid)
74 | {:reply, image_id, worker}
75 | end
76 |
77 |
78 | def handle_info({port, {:data, <