User: Admin: Difference between revisions
From ElixirBlocks
No edit summary |
No edit summary |
||
Line 11: | Line 11: | ||
* How to use JS hooks | * How to use JS hooks | ||
* | * | ||
<source> | |||
defmodule AppWeb.PageLive do | |||
use AppWeb, :live_view | |||
alias App.Testbeds | |||
def mount(_params, _session, socket)do | |||
{:ok, assign(socket, testbeds: Testbeds.list_testbeds())} | |||
end | |||
def button_event("invoke_editing") do | |||
%JS{} | |||
|> JS.remove_class("active", to: "#editing_button") | |||
|> JS.add_class("hidden", to: "#editing_button") | |||
|> JS.remove_class("hidden", to: "#preview_button") | |||
|> JS.add_class("active", to: "#preview_button") | |||
|> JS.remove_class("active", to: "#preview") | |||
|> JS.add_class("hidden", to: "#preview") | |||
|> JS.remove_class("hidden", to: "#editing") | |||
|> JS.add_class("active", to: "#editing") | |||
end | |||
def button_event("invoke_preview") do | |||
%JS{} | |||
|> JS.remove_class("active", to: "#preview_button") | |||
|> JS.add_class("hidden", to: "#preview_button") | |||
|> JS.remove_class("hidden", to: "#editing_button") | |||
|> JS.add_class("active", to: "#editing_button") | |||
|> JS.remove_class("active", to: "#editing") | |||
|> JS.add_class("hidden", to: "#editing") | |||
|> JS.remove_class("hidden", to: "#preview") | |||
|> JS.add_class("active", to: "#preview") | |||
end | |||
def handle_event("send", params, socket) do | |||
hide_modal("notes-modal-0") | |||
{:noreply, socket} | |||
end | |||
def render(assigns) do | |||
~H""" | |||
<%= for testbed <- @testbeds do %> | |||
<.modal id={"notes-modal-#{testbed.id}"}> | |||
<.button phx-click={button_event("invoke_editing")} id="editing_button" class="hidden"> | |||
Preview | |||
</.button> | |||
<.button phx-click={button_event("invoke_preview")} id="preview_button"> | |||
Edit Me | |||
</.button> | |||
<div id="editing"> PREVIEWING THE WORK</div> | |||
<form phx-submit = "send" id="preview" class="hidden"> | |||
<textarea value = {testbed.note}></textarea> | |||
<.button type="submit" phx-click={hide_modal("notes-modal-#{testbed.id}")}>SAVE WORK</.button> | |||
</form> | |||
</.modal> | |||
<%= if testbed.note do %> | |||
<div phx-click={show_modal("notes-modal-#{testbed.id}")}>READ ME ...<%= testbed.note %></div> | |||
<% end %> | |||
<% end %> | |||
""" | |||
end | |||
end | |||
</source> | |||
<source> | <source> | ||
import {HfInference} from "@huggingface/inference"; | import {HfInference} from "@huggingface/inference"; |
Revision as of 11:16, 7 July 2023
- How to Create Database Seed Data.
- How to Use Generators in a Real World Project
- How to Work with Database Data via Basic Commands and Custom Change sets.
- How to Render Database Data to LiveView (via Context Commands).
- How to Create a Chat using PubSub.
- How to Create Event Handlers in LiveView
- How to Create a Dynamic Route from Scratch.
- How to Use Elixirs Template language
- How to Work with Modal
- How to Use CSS From Scratch (Without bundler)
- How to use JS hooks
defmodule AppWeb.PageLive do use AppWeb, :live_view alias App.Testbeds def mount(_params, _session, socket)do {:ok, assign(socket, testbeds: Testbeds.list_testbeds())} end def button_event("invoke_editing") do %JS{} |> JS.remove_class("active", to: "#editing_button") |> JS.add_class("hidden", to: "#editing_button") |> JS.remove_class("hidden", to: "#preview_button") |> JS.add_class("active", to: "#preview_button") |> JS.remove_class("active", to: "#preview") |> JS.add_class("hidden", to: "#preview") |> JS.remove_class("hidden", to: "#editing") |> JS.add_class("active", to: "#editing") end def button_event("invoke_preview") do %JS{} |> JS.remove_class("active", to: "#preview_button") |> JS.add_class("hidden", to: "#preview_button") |> JS.remove_class("hidden", to: "#editing_button") |> JS.add_class("active", to: "#editing_button") |> JS.remove_class("active", to: "#editing") |> JS.add_class("hidden", to: "#editing") |> JS.remove_class("hidden", to: "#preview") |> JS.add_class("active", to: "#preview") end def handle_event("send", params, socket) do hide_modal("notes-modal-0") {:noreply, socket} end def render(assigns) do ~H""" <%= for testbed <- @testbeds do %> <.modal id={"notes-modal-#{testbed.id}"}> <.button phx-click={button_event("invoke_editing")} id="editing_button" class="hidden"> Preview </.button> <.button phx-click={button_event("invoke_preview")} id="preview_button"> Edit Me </.button> <div id="editing"> PREVIEWING THE WORK</div> <form phx-submit = "send" id="preview" class="hidden"> <textarea value = {testbed.note}></textarea> <.button type="submit" phx-click={hide_modal("notes-modal-#{testbed.id}")}>SAVE WORK</.button> </form> </.modal> <%= if testbed.note do %> <div phx-click={show_modal("notes-modal-#{testbed.id}")}>READ ME ...<%= testbed.note %></div> <% end %> <% end %> """ end end
import {HfInference} from "@huggingface/inference"; import dotenv from "dotenv"; dotenv.config() const HF_ACCESS_TOKEN = process.env.HF_ACCESS_TOKEN const hf = new HfInference(HF_ACCESS_TOKEN); /*______Uncomment for this example______________________ const model = "nlpconnect/vit-gpt2-image-captioning"; const imageURL = "https://i.imgur.com/lTvb7Et.png"; const response = await fetch(imageURL); const imageBlob = await response.blob(); const result = await hf.imageToText({ data: imageBlob, model: model, }); _______________________________________________________*/ /*________Another example ___________________*/ const result = await hf.summarization({ model: 'facebook/bart-large-cnn', inputs: "The role of a dumb man is to get smarter oogy bookie boo", parameters:{ max_length: 100 } }); console.log(result);
________________________________________
https://fly.io/phoenix-files/sdeb-toggling-element/
https://www.youtube.com/watch?v=vBgZvQapqhs
https://blog.testdouble.com/posts/2022-11-28-how-to-use-javascript-with-phoenix-liveview/