solve

rlcube/rlcube/models/search.py

@@ -40,7 +40,7 @@ class Node:
 
     def select_action(self):
         scores = self.u()
-        return np.argmax(scores)
+        return np.argmax(scores).item()
 
 
 class MonteCarloTree:

src/components/state-modal.tsx

@@ -14,7 +14,7 @@ export type StateModalRef = {
 
 export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
   const [state, setState] = useState<Array<Array<number>>>([]);
-  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   useImperativeHandle(ref, () => ({
     open: (state: Array<Array<number>>) => {
@@ -27,27 +27,6 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
     navigator.clipboard.writeText(JSON.stringify(state));
   };
 
-  const solve = async () => {
-    try {
-      const response = await fetch('/api/solve', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ state }),
-      });
-      if (!response.ok) {
-        throw new Error('Server error', { cause: response });
-      }
-      const { steps } = await response.json();
-      rotationController.addRotationStepCode(...steps);
-      onClose();
-    } catch (err) {
-      alert('An error occurred. Check the console for details.');
-      console.error(err);
-    }
-  };
-
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
       <ModalContent>
@@ -95,9 +74,6 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
               <Button color="primary" variant="light" size="sm" onPress={copy}>
                 Copy
               </Button>
-              <Button color="success" size="sm" onPress={solve}>
-                Solve
-              </Button>
             </ModalFooter>
           </>
         )}

src/components/ui-controls.tsx

@@ -14,6 +14,7 @@ import { StateModal, StateModalRef } from './state-modal';
 
 export const UIControls = () => {
   const stateModalRef = useRef<StateModalRef | null>(null);
+  const [isSolving, setIsSolving] = useState(false);
   const [isControlsOpen, setIsControlsOpen] = useState(true);
   const {
     rubiksCubeRef,
@@ -24,10 +25,15 @@ export const UIControls = () => {
     setCubeRoughness,
     cubeSpeed,
     setCubeSpeed,
+    scrambleLength,
+    setScrambleLength,
   } = useControlContext();
 
   const scramble = () => {
-    const scrambleSteps = Array.from({ length: 5 }, () => Actions[Math.floor(Math.random() * Actions.length)]);
+    const scrambleSteps = Array.from(
+      { length: scrambleLength },
+      () => Actions[Math.floor(Math.random() * Actions.length)],
+    );
     rubiksCubeRef?.current?.rotate(scrambleSteps);
   };
 
@@ -41,7 +47,34 @@ export const UIControls = () => {
   };
 
   const train = () => {
-    alert('Working on it!');
+    window.open('https://github.com/crossentropy-ai/rlcube', '_blank');
+  };
+
+  const solve = async () => {
+    try {
+      setIsSolving(true);
+      const response = await fetch('/api/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ state: rotationController.getState() }),
+      });
+      if (response.status === 422) {
+        alert('Unable to solve the cube.');
+        return;
+      }
+      if (!response.ok) {
+        throw new Error('Server error', { cause: response });
+      }
+      const { steps } = await response.json();
+      rotationController.addRotationStepCode(...steps);
+    } catch (err) {
+      alert('An error occurred. Check the console for details.');
+      console.error(err);
+    } finally {
+      setIsSolving(false);
+    }
   };
 
   return (
@@ -93,6 +126,15 @@ export const UIControls = () => {
                 maxValue={10}
                 step={1}
               />
+              <Slider
+                size="sm"
+                label="Scramble Length"
+                value={scrambleLength}
+                onChange={(value) => setScrambleLength(value as number)}
+                minValue={1}
+                maxValue={20}
+                step={1}
+              />
             </div>
             <div className="flex flex-col gap-2">
               <div className="flex gap-2">
@@ -100,8 +142,11 @@ export const UIControls = () => {
                   <Button onPress={scramble}>Scramble</Button>
                   <Button onPress={reset}>Reset</Button>
                 </ButtonGroup>
+                <Button variant="light" size="sm" onPress={showState}>
+                  Show State
+                </Button>
 
-                <Button size="sm" className="ms-auto" color="success" onPress={showState}>
+                <Button size="sm" className="ms-auto" color="success" onPress={solve} isLoading={isSolving}>
                   Solve
                 </Button>
               </div>

src/contexts/control-context.tsx

@@ -12,6 +12,8 @@ type ControlContextType = {
   setCubeRoughness: (cubeRoughness: number) => void;
   cubeSpeed: number;
   setCubeSpeed: (cubeSpeed: number) => void;
+  scrambleLength: number;
+  setScrambleLength: (scrambleLength: number) => void;
   background: PresetsType;
   setBackground: (background: PresetsType) => void;
   rubiksCubeRef?: RefObject<RubiksCubeRef | null>;
@@ -25,6 +27,8 @@ export const ControlContext = createContext<ControlContextType>({
   setCubeRoughness: () => {},
   cubeSpeed: 8,
   setCubeSpeed: () => {},
+  scrambleLength: 8,
+  setScrambleLength: () => {},
   background: 'sunset',
   setBackground: () => {},
   rubiksCubeRef: undefined,
@@ -39,6 +43,7 @@ export const ControlProvider = ({ children }: { children: React.ReactNode }) =>
   const [showRotationIndicators, setShowRotationIndicators] = useState(false);
   const [cubeRoughness, setCubeRoughness] = useState(0.5);
   const [cubeSpeed, setCubeSpeed] = useState(8);
+  const [scrambleLength, setScrambleLength] = useState(8);
   const [background, setBackground] = useState<PresetsType>('sunset');
   const [rubiksCubeRef, setRubiksCubeRef] = useState<RefObject<RubiksCubeRef | null> | undefined>(undefined);
 
@@ -51,6 +56,8 @@ export const ControlProvider = ({ children }: { children: React.ReactNode }) =>
         setCubeRoughness,
         cubeSpeed,
         setCubeSpeed,
+        scrambleLength,
+        setScrambleLength,
         background,
         setBackground,
         rubiksCubeRef,