 }})
8 |
455 | {
514 | resetState(initialState)
515 | }}
516 | />
517 | )}
518 |
519 | )
520 | }
521 |
522 | export default withStreamlitConnection(DrawableCanvas)
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/DrawableCanvasState.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useReducer,
4 | useContext,
5 | useCallback,
6 | } from "react"
7 | import { isEmpty, isEqual } from "lodash"
8 |
9 | const HISTORY_MAX_COUNT = 100
10 |
11 | interface CanvasHistory {
12 | undoStack: Object[] // store previous canvas states
13 | redoStack: Object[] // store undone canvas states
14 | }
15 |
16 | interface CanvasAction {
17 | shouldReloadCanvas: boolean // reload currentState into app canvas, on undo/redo
18 | forceSendToStreamlit: boolean // send currentState back to Streamlit
19 | }
20 |
21 | const NO_ACTION: CanvasAction = {
22 | shouldReloadCanvas: false,
23 | forceSendToStreamlit: false,
24 | }
25 |
26 | const RELOAD_CANVAS: CanvasAction = {
27 | shouldReloadCanvas: true,
28 | forceSendToStreamlit: false,
29 | }
30 |
31 | const SEND_TO_STREAMLIT: CanvasAction = {
32 | shouldReloadCanvas: false,
33 | forceSendToStreamlit: true,
34 | }
35 |
36 | const RELOAD_AND_SEND_TO_STREAMLIT: CanvasAction = {
37 | shouldReloadCanvas: true,
38 | forceSendToStreamlit: true,
39 | }
40 |
41 | interface CanvasState {
42 | history: CanvasHistory
43 | action: CanvasAction
44 | initialState: Object // first currentState for app
45 | currentState: Object // current canvas state as canvas.toJSON()
46 | }
47 |
48 | interface Action {
49 | type: "save" | "undo" | "redo" | "reset" | "forceSendToStreamlit"
50 | state?: Object
51 | }
52 |
53 | /**
54 | * Reducer takes 5 actions: save, undo, redo, reset, forceSendToStreamlit
55 | *
56 | * On reset, clear everything, set initial and current state to cleared canvas
57 | *
58 | * On save:
59 | * - First, if there is no initial state, set it to current
60 | * Since we don't reset history on component initialization
61 | * As backgroundColor/image are applied after component init
62 | * and wouldn't be stored in initial state
63 | * - If the sent state is same as current state, then nothing has changed so don't save
64 | * - Clear redo stack
65 | * - Push current state to undo stack, delete oldest if necessary
66 | * - Set new current state
67 | *
68 | * On undo:
69 | * - Push state to redoStack if it's not the initial
70 | * - Pop state from undoStack into current state
71 | *
72 | * On redo:
73 | * - Pop state from redoStack into current state
74 | *
75 | * For undo/redo/reset, set shouldReloadCanvas to inject currentState into user facing canvas
76 | */
77 | const canvasStateReducer = (
78 | state: CanvasState,
79 | action: Action
80 | ): CanvasState => {
81 | switch (action.type) {
82 | case "save":
83 | if (!action.state) throw new Error("No action state to save")
84 | else if (isEmpty(state.currentState)) {
85 | return {
86 | history: {
87 | undoStack: [],
88 | redoStack: [],
89 | },
90 | action: { ...NO_ACTION },
91 | initialState: action.state,
92 | currentState: action.state,
93 | }
94 | } else if (isEqual(action.state, state.currentState))
95 | return {
96 | history: { ...state.history },
97 | action: { ...NO_ACTION },
98 | initialState: state.initialState,
99 | currentState: state.currentState,
100 | }
101 | else {
102 | const undoOverHistoryMaxCount =
103 | state.history.undoStack.length >= HISTORY_MAX_COUNT
104 | return {
105 | history: {
106 | undoStack: [
107 | ...state.history.undoStack.slice(undoOverHistoryMaxCount ? 1 : 0),
108 | state.currentState,
109 | ],
110 | redoStack: [],
111 | },
112 | action: { ...NO_ACTION },
113 | initialState:
114 | state.initialState == null
115 | ? state.currentState
116 | : state.initialState,
117 | currentState: action.state,
118 | }
119 | }
120 | case "undo":
121 | if (
122 | isEmpty(state.currentState) ||
123 | isEqual(state.initialState, state.currentState)
124 | ) {
125 | return {
126 | history: { ...state.history },
127 | action: { ...NO_ACTION },
128 | initialState: state.initialState,
129 | currentState: state.currentState,
130 | }
131 | } else {
132 | const isUndoEmpty = state.history.undoStack.length === 0
133 | return {
134 | history: {
135 | undoStack: state.history.undoStack.slice(0, -1),
136 | redoStack: [...state.history.redoStack, state.currentState],
137 | },
138 | action: { ...RELOAD_CANVAS },
139 | initialState: state.initialState,
140 | currentState: isUndoEmpty
141 | ? state.currentState
142 | : state.history.undoStack[state.history.undoStack.length - 1],
143 | }
144 | }
145 | case "redo":
146 | if (state.history.redoStack.length > 0) {
147 | // TODO: test currentState empty too ?
148 | return {
149 | history: {
150 | undoStack: [...state.history.undoStack, state.currentState],
151 | redoStack: state.history.redoStack.slice(0, -1),
152 | },
153 | action: { ...RELOAD_CANVAS },
154 | initialState: state.initialState,
155 | currentState:
156 | state.history.redoStack[state.history.redoStack.length - 1],
157 | }
158 | } else {
159 | return {
160 | history: { ...state.history },
161 | action: { ...NO_ACTION },
162 | initialState: state.initialState,
163 | currentState: state.currentState,
164 | }
165 | }
166 | case "reset":
167 | if (!action.state) throw new Error("No action state to store in reset")
168 | return {
169 | history: {
170 | undoStack: [],
171 | redoStack: [],
172 | },
173 | action: { ...RELOAD_AND_SEND_TO_STREAMLIT },
174 | initialState: action.state,
175 | currentState: action.state,
176 | }
177 | case "forceSendToStreamlit":
178 | return {
179 | history: { ...state.history },
180 | action: { ...SEND_TO_STREAMLIT },
181 | initialState: state.initialState,
182 | currentState: state.currentState,
183 | }
184 | default:
185 | throw new Error("TS should protect from this")
186 | }
187 | }
188 |
189 | const initialState: CanvasState = {
190 | history: {
191 | undoStack: [],
192 | redoStack: [],
193 | },
194 | action: {
195 | forceSendToStreamlit: false,
196 | shouldReloadCanvas: false,
197 | },
198 | initialState: {},
199 | currentState: {},
200 | }
201 |
202 | interface CanvasStateContextProps {
203 | canvasState: CanvasState
204 | saveState: (state: Object) => void
205 | undo: () => void
206 | redo: () => void
207 | forceStreamlitUpdate: () => void
208 | canUndo: boolean
209 | canRedo: boolean
210 | resetState: (state: Object) => void
211 | }
212 |
213 | const CanvasStateContext = createContext
464 | {/*
475 |
483 |
488 |
489 |
497 |
503 |
504 | {displayToolbar && (
505 | 
39 | )
40 | SquareIcon.defaultProps = {
41 | invertX: false,
42 | }
43 |
44 | interface CanvasToolbarProps {
45 | topPosition: number
46 | leftPosition: number
47 | canUndo: boolean
48 | canRedo: boolean
49 | downloadCallback: () => void
50 | undoCallback: () => void
51 | redoCallback: () => void
52 | resetCallback: () => void
53 | }
54 |
55 | const CanvasToolbar = ({
56 | topPosition,
57 | leftPosition,
58 | canUndo,
59 | canRedo,
60 | downloadCallback,
61 | undoCallback,
62 | redoCallback,
63 | resetCallback,
64 | }: CanvasToolbarProps) => {
65 | const GAP_BETWEEN_ICONS = 4
66 | const ICON_SIZE = 24
67 |
68 | const iconElements = [
69 | {
70 | imgUrl: download,
71 | altText: "Send to Streamlit",
72 | invertX: false,
73 | enabled: true,
74 | clickCallback: downloadCallback,
75 | },
76 | {
77 | imgUrl: undo,
78 | altText: "Undo",
79 | invertX: true,
80 | enabled: canUndo,
81 | clickCallback: canUndo ? undoCallback : () => {},
82 | },
83 | {
84 | imgUrl: undo,
85 | altText: "Redo",
86 | invertX: false,
87 | enabled: canRedo,
88 | clickCallback: canRedo ? redoCallback : () => {},
89 | },
90 | {
91 | imgUrl: bin,
92 | altText: "Reset canvas & history",
93 | invertX: false,
94 | enabled: true,
95 | clickCallback: resetCallback,
96 | },
97 | ]
98 |
99 | return (
100 |
110 | {iconElements.map((e) => (
111 |
122 | )
123 | }
124 |
125 | export default CanvasToolbar
126 |
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/components/UpdateStreamlit.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react"
2 | import { Streamlit } from "streamlit-component-lib"
3 | import { fabric } from "fabric"
4 |
5 | const DELAY_DEBOUNCE = 0
6 |
7 | /**
8 | * Download image and JSON data from canvas to send back to Streamlit
9 | */
10 | const sendDataToStreamlit = (canvas: fabric.Canvas, selectedRect: number): void => {
11 | const data = canvas
12 | .getContext()
13 | .canvas.toDataURL()
14 | Streamlit.setComponentValue({
15 | data: data,
16 | width: canvas.getWidth(),
17 | height: canvas.getHeight(),
18 | raw: canvas.toObject(),
19 | selectIndex: selectedRect
20 | })
21 | }
22 |
23 | /**
24 | * This hook allows you to debounce any fast changing value.
25 | * The debounced value will only reflect the latest value when the useDebounce hook has not been called for the specified time period.
26 | * When used in conjunction with useEffect, you can easily ensure that expensive operations like API calls are not executed too frequently.
27 | * https://usehooks.com/useDebounce/
28 | * @param value value to debounce
29 | * @param delay delay of debounce in ms
30 | */
31 | const useDebounce = (value: any, delay: number) => {
32 | const [debouncedValue, setDebouncedValue] = useState(value)
33 |
34 | useEffect(
35 | () => {
36 | // Update debounced value after delay
37 | const handler = setTimeout(() => {
38 | setDebouncedValue(value)
39 | }, delay)
40 |
41 | // Cancel the timeout if value changes (also on delay change or unmount)
42 | // This is how we prevent debounced value from updating if value is changed ...
43 | // .. within the delay period. Timeout gets cleared and restarted.
44 | return () => {
45 | clearTimeout(handler)
46 | }
47 | },
48 | [value, delay] // Only re-call effect if value or delay changes
49 | )
50 | return debouncedValue
51 | }
52 |
53 | interface UpdateStreamlitProps {
54 | shouldSendToStreamlit: boolean
55 | stateToSendToStreamlit: Object
56 | canvasWidth: number
57 | canvasHeight: number
58 | selectedRect: number
59 | }
60 |
61 | /**
62 | * Canvas whose sole purpose is to draw current state
63 | * to send image data to Streamlit.
64 | * Put it in the background or make it invisible!
65 | */
66 | const UpdateStreamlit = (props: UpdateStreamlitProps) => {
67 | const [stCanvas, setStCanvas] = useState(new fabric.Canvas(""))
68 |
69 | // Debounce fast changing canvas states
70 | // Especially when drawing lines and circles which continuously render while drawing
71 | const debouncedStateToSend = useDebounce(
72 | props.stateToSendToStreamlit,
73 | DELAY_DEBOUNCE
74 | )
75 |
76 | // Initialize canvas
77 | useEffect(() => {
78 | const stC = new fabric.Canvas("canvas-to-streamlit", {
79 | enableRetinaScaling: false,
80 | })
81 | setStCanvas(stC)
82 | }, [])
83 |
84 | // Load state to canvas, then send content to Streamlit
85 | useEffect(() => {
86 | if (debouncedStateToSend && props.shouldSendToStreamlit) {
87 | stCanvas.loadFromJSON(debouncedStateToSend, () => {
88 | sendDataToStreamlit(stCanvas, props.selectedRect)
89 | })
90 | }
91 | }, [stCanvas, props.shouldSendToStreamlit, props.selectedRect, debouncedStateToSend])
92 |
93 | return (
94 |
99 | )
100 | }
101 |
102 | export default UpdateStreamlit
103 |
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/img/bin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cinnamon/ai-bootcamp-2024/87e28e5863621aa989a6ef5d88785505acde5345/streamlit_demo/shared/views/canvas/frontend/src/img/bin.png
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/img/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cinnamon/ai-bootcamp-2024/87e28e5863621aa989a6ef5d88785505acde5345/streamlit_demo/shared/views/canvas/frontend/src/img/download.png
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/img/undo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cinnamon/ai-bootcamp-2024/87e28e5863621aa989a6ef5d88785505acde5345/streamlit_demo/shared/views/canvas/frontend/src/img/undo.png
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | box-sizing: border-box;
3 | }
4 |
5 | *,
6 | ::before,
7 | ::after {
8 | box-sizing: inherit;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | background: transparent;
14 | }
15 |
--------------------------------------------------------------------------------
/streamlit_demo/shared/views/canvas/frontend/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom"
3 | import DrawableCanvas from "./DrawableCanvas"
4 | import { CanvasStateProvider } from "./DrawableCanvasState"
5 |
6 | import "./index.css"
7 |
8 | ReactDOM.render(
9 |