Skip to content

Commit

Permalink
share link
Browse files Browse the repository at this point in the history
  • Loading branch information
@cbh123
cbh123 committed Feb 23, 2024
1 parent e702132 commit e09b485
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 108 deletions.
29 changes: 29 additions & 0 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,35 @@ let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks,
});

window.addEventListener("phx:copy", async (event) => {
let button = event.detail.dispatcher;
// Assuming you want to share the URL stored in a data attribute named 'data-url'
let urlToShare =
event.target.getAttribute("data-url") || event.target.dataset.url;

// Check if the Web Share API is available
if (navigator.share) {
try {
await navigator.share({
title: "Check out my AI generated sticker", // Optional: Title of the content to share
url: urlToShare, // The URL you want to share
});
console.log("Content shared successfully");
} catch (error) {
console.error("Error sharing content:", error);
}
} else {
// Fallback for browsers that do not support the Web Share API
// For example, copy the URL to clipboard
navigator.clipboard.writeText(text).then(() => {
button.innerText = "Link copied to clipboard!";
setTimeout(() => {
button.innerText = "Share link";
}, 2000);
});
}
});

// Show progress bar on live navigation and form submits
topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
Expand Down
52 changes: 26 additions & 26 deletions lib/sticker_web/components/components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,32 @@ defmodule StickerWeb.Components do

defp image(assigns) do
~H"""
<div class="group aspect-h-10 aspect-w-10 block overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-black-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
<%= if is_nil(@prediction.sticker_output) and is_nil(@prediction.no_bg_output) do %>
<div class="flex items-center justify-center h-36">
<p class="animate-pulse ">Loading...</p>
</div>
<% else %>
<button
id={"prediction-#{@id}-btn"}
phx-hook="DownloadImage"
phx-value-name={@prediction.prompt |> humanize()}
phx-value-image={@prediction.no_bg_output || @prediction.sticker_output}
type="button"
>
<img
src={@prediction.no_bg_output || @prediction.sticker_output}
alt={@prediction.prompt}
class="pointer-events-none object-cover group-hover:opacity-75"
/>
</button>
<% end %>
</div>
<.link
navigate={~p"/sticker/#{@prediction.id}"}
class="mt-2 block truncate text-sm font-medium text-gray-900"
>
<%= @prediction.prompt %>
<.link navigate={~p"/sticker/#{@prediction.id}"}>
<div class="group aspect-h-10 aspect-w-10 block overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-black-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
<%= if is_nil(@prediction.sticker_output) and is_nil(@prediction.no_bg_output) do %>
<div class="flex items-center justify-center h-36">
<p class="animate-pulse ">Loading...</p>
</div>
<% else %>
<button
id={"prediction-#{@id}-btn"}
phx-hook="DownloadImage"
phx-value-name={@prediction.prompt |> humanize()}
phx-value-image={@prediction.no_bg_output || @prediction.sticker_output}
type="button"
>
<img
src={@prediction.no_bg_output || @prediction.sticker_output}
alt={@prediction.prompt}
class="pointer-events-none object-cover group-hover:opacity-75"
/>
</button>
<% end %>
</div>
<span class="mt-2 block truncate text-sm font-medium text-gray-900">
<%= @prediction.prompt %>
</span>
</.link>
"""
end
Expand Down
6 changes: 4 additions & 2 deletions lib/sticker_web/components/core_components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ defmodule StickerWeb.CoreComponents do

def badge(assigns) do
~H"""
<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"><%= @text %></span>
<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
<%= @text %>
</span>
"""
end

Expand Down Expand Up @@ -289,7 +291,7 @@ defmodule StickerWeb.CoreComponents do
type={@type}
class={[
"phx-submit-loading:opacity-75 rounded-lg bg-white hover:bg-gray-50 py-2 px-3",
"text-sm font-semibold leading-6 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 active:text-white/80",
"text-sm font-semibold leading-6 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 active:text-gray-800",
@class
]}
{@rest}
Expand Down
15 changes: 9 additions & 6 deletions lib/sticker_web/live/home_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,23 @@ defmodule StickerWeb.HomeLive do

@fail_image "https://github.com/replicate/zoo/assets/14149230/39c124db-a793-4ca9-a9b4-706fe18984ad"

def mount(_params, _session, socket) do
def mount(params, _session, socket) do
{:ok,
socket
|> assign(form: to_form(%{"prompt" => ""}))
|> assign(local_user_id: nil)
|> assign(remove_bg: false)
|> stream(:my_predictions, [])
|> stream(:latest_predictions, Predictions.list_latest_safe_predictions(99))}
end

def handle_params(%{"prompt" => prompt}, _, socket) do
{:noreply, socket |> assign(form: to_form(%{"prompt" => prompt}))}
end

def handle_params(params, _, socket) do
{:noreply, socket}
end

def handle_event("thumbs-up", %{"id" => id}, socket) do
prediction = Predictions.get_prediction!(id)

Expand All @@ -38,10 +45,6 @@ defmodule StickerWeb.HomeLive do
{:noreply, socket |> put_flash(:info, "Thanks for your rating!")}
end

def handle_event("toggle-bg", _, socket) do
{:noreply, socket |> assign(show_bg: !socket.assigns.show_bg)}
end

def handle_event("validate", %{"prompt" => _prompt}, socket) do
{:noreply, socket}
end
Expand Down
10 changes: 0 additions & 10 deletions lib/sticker_web/live/home_live.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,6 @@
<.button name="submit" value="generate" phx-disable-with="Saving..." class="self-end ml-2">
Generate
</.button>
<div class="hidden">
<.outline_button
name="submit"
value="search"
phx-disable-with="Searching..."
class="self-end ml-2"
>
Search
</.outline_button>
</div>
</div>
<span class="text-xs text-gray-500">
Try something simple like ‘cat’ or ‘high five’. Click to download!
Expand Down
35 changes: 5 additions & 30 deletions lib/sticker_web/live/show_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ defmodule StickerWeb.ShowLive do

def mount(%{"id" => id}, _session, socket) do
prediction = Predictions.get_prediction!(id)
{:ok, socket |> assign(prediction: prediction) |> assign(show_bg: false)}

{:ok,
socket |> assign(prediction: prediction, form: to_form(%{"prompt" => prediction.prompt}))}
end

def handle_event("toggle-bg", _, socket) do
{:noreply, socket |> assign(show_bg: !socket.assigns.show_bg)}
def handle_event("save", %{"prompt" => prompt}, socket) do
{:noreply, socket |> push_redirect(to: ~p"/?prompt=#{prompt}")}
end

def handle_event("thumbs-up", %{"id" => id}, socket) do
Expand All @@ -35,31 +37,4 @@ defmodule StickerWeb.ShowLive do

{:noreply, socket |> put_flash(:info, "Thanks for your rating!")}
end

def render_image(%Prediction{no_bg_output: nil, sticker_output: nil}, _show_bg), do: nil

def render_image(%Prediction{no_bg_output: nil, sticker_output: sticker_output}, _show_bg),
do: sticker_output

def render_image(%Prediction{no_bg_output: no_bg_output, sticker_output: nil}, _show_bg),
do: no_bg_output

def render_image(%Prediction{no_bg_output: _no_bg_output, sticker_output: sticker_output}, true),
do: sticker_output

def render_image(%Prediction{no_bg_output: no_bg_output, sticker_output: _sticker_output}, false),
do: no_bg_output

defp human_name(name) do
dasherize(name)
end

defp dasherize(name) do
name
|> String.replace("A TOK sticker of a ", "")
|> String.replace("A TOK sticker of an ", "")
|> String.split(" ")
|> Enum.join("-")
|> String.replace("--", "-")
end
end
94 changes: 60 additions & 34 deletions lib/sticker_web/live/show_live.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,64 @@
<button
id={"prediction-#{@prediction.id}-btn"}
phx-hook="DownloadImage"
class="mt-4"
phx-value-name={@prediction.prompt |> human_name()}
phx-value-image={render_image(@prediction, @show_bg)}
type="button"
>
<img
src={render_image(@prediction, @show_bg)}
alt={@prediction.prompt}
class="pointer-events-none object-cover group-hover:opacity-75"
/>
</button>
<.link
navigate={~p"/sticker/#{@prediction.id}"}
class="mt-2 block truncate text-center text-4xl font-medium text-gray-900"
>
<%= @prediction.prompt %>
</.link>
<div class={"flex justify-between items-center feedback-#{@prediction.id}"}>
<div class="max-w-xl mx-auto">
<.form for={@form} id="prediction-form" class="max-w-xl mx-auto" phx-submit="save">
<div class="flex items-center w-full ">
<.input
field={@form[:prompt]}
type="text"
required
placeholder="What is your sticker?"
class=""
/>
<.button name="submit" value="generate" class="self-end ml-2">
<.icon name="hero-arrow-path" class="h-4 w-4" />
</.button>
</div>
</.form>

<div class="mt-4 grid grid-cols-2 gap-4">
<.outline_button
id="download"
phx-hook="DownloadImage"
phx-value-name={@prediction.prompt}
phx-value-image={@prediction.sticker_output}
>
<.icon name="hero-arrow-down-tray" class="h-4 w-4 mr-2" />Download
</.outline_button>
<.outline_button
id="copy"
data-url={"https://sticker.fly.dev/sticker/#{@prediction.id}"}
phx-click={JS.dispatch("phx:copy", to: "#copy")}
>
<.icon name="hero-link" class="h-4 w-4 mr-2" />Share link
</.outline_button>
</div>

<button
id={"thumbs-up-#{@prediction.id}"}
phx-click={JS.hide(to: ".feedback-#{@prediction.id}") |> JS.push("thumbs-up")}
phx-value-id={@prediction.id}
class="rounded-full mt-2"
id={"prediction-#{@prediction.id}-btn"}
phx-hook="DownloadImage"
class="mt-4"
phx-value-name={@prediction.prompt}
phx-value-image={@prediction.sticker_output}
type="button"
>
<img class="h-12" src="/images/thumbs-up.png" alt="" />
</button>
<button
id={"thumbs-down-#{@prediction.id}"}
phx-value-id={@prediction.id}
phx-click={JS.hide(to: ".feedback-#{@prediction.id}") |> JS.push("thumbs-down")}
class="rounded-full mt-2 rotate-180"
>
<img class="h-12" src="/images/thumbs-up.png" alt="" />
<img src={@prediction.sticker_output} alt={@prediction.prompt} />
</button>

<div class={"flex justify-between items-center feedback-#{@prediction.id}"}>
<button
id={"thumbs-up-#{@prediction.id}"}
phx-click={JS.hide(to: ".feedback-#{@prediction.id}") |> JS.push("thumbs-up")}
phx-value-id={@prediction.id}
class="rounded-full mt-2"
>
<img class="h-12" src="/images/thumbs-up.png" alt="" />
</button>
<button
id={"thumbs-down-#{@prediction.id}"}
phx-value-id={@prediction.id}
phx-click={JS.hide(to: ".feedback-#{@prediction.id}") |> JS.push("thumbs-down")}
class="rounded-full mt-2 rotate-180"
>
<img class="h-12" src="/images/thumbs-up.png" alt="" />
</button>
</div>
</div>

0 comments on commit e09b485

Please sign in to comment.